SOURCE

function validateForm(){
    console.log('onSubmit')
    var Els = document.querySelectorAll('input[validate]')
    var flag = true
    for(var i=0;i<=Els.length-1;i++){
        var val = Els[i].value
        if(val == '' || val == null){
            errorUpdate(Els[i],'不能为空')
            flag = false
        }else{
            var phoneReg = /^[1]\d{10}$/,
                emailReg = /^\S+@\S+\.\S+$/;
            if(Els[i].name == 'phone' && !phoneReg.test(val)){
                errorUpdate(Els[i],"手机号格式错误");
                flag = false
            }else if(Els[i].name == 'email' && !emailReg.test(val)){
                errorUpdate(Els[i],"邮箱格式错误");
                flag = false
            }else{
                errorUpdate(Els[i],'')
            }
        }
    }
    return flag
}
function errorUpdate(el,msg){
    el.nextElementSibling.innerHTML = msg
}

<form action="/test" method="get" onsubmit="return validateForm()">
    <div class="form-item">
        <label>姓名</label>
        <input type="text" placeholder="请输入" name="username" validate>
        <p class="error"></p>
    </div>
    <div class="form-item">
        <label>手机号</label>
        <input type="text" placeholder="请输入" name="phone" maxlength="11" validate>
        <p class="error"></p>
    </div>
    <div class="form-item">
        <label>邮箱</label>
        <input type="text" placeholder="请输入" name="email" validate>
        <p class="error"></p>
    </div>
    <div class="form-item">
        <label>其他</label>
        <input type="text" placeholder="请输入" name="username" required>
        <p class="error"></p>
    </div>
    
    <button type="submit">提交</button>
</form>