简易的表单验证

html设计
用户名：<input type=“text” id=“user”<span</span

密码：<input type=“text” id=“pass”<span</span

重复密码：<input type=“text” id=“pass2”<span</span

手机号：<input type=“text” id=“tel”</span

<input type=“button” id=“btn” value=“提交”
js设计
var ouser = document.getElementById(“user”);
var opass = document.getElementById(“pass”);
var opass2 = document.getElementById(“pass2”);
var otel = document.getElementById(“tel”);
var obtn = document.getElementById(“btn”);

// 用来记录每个输入框的状态，成功或失败，为将来整体验证做准备
var u=p=p2=t=false;

// 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
ouser.onblur = function(){
    var reg = /^[\u2E80-\u9FFF\w-]{4,20}$/;
    if(reg.test(this.value)){
        this.nextElementSibling.innerHTML = "用户名正确";
        u = true;
    }else{
        this.nextElementSibling.innerHTML = "用户名错误";
        u = false;
    }
}

opass.onblur = function(){
    // 给密码可能会出现的字符的种类做状态，为将来验证密码强度做准备
    var a=b=c=0;
    // 是否出现数字
    var numReg = /\d/;
    if(numReg.test(this.value)){
        a=1
    }
    // 是否出现字母
    var azReg = /[a-zA-Z]/;
    if(azReg.test(this.value)){
        b=1
    }
    // 是否出现特殊字符
    var tsReg = /[^0-9a-zA-Z\u2E80-\u9FFF]/;
    if(tsReg.test(this.value)){
        c=1
    }

    switch(a+b+c){
        case 1:
            this.nextElementSibling.innerHTML = "简单";break;
        case 2:
            this.nextElementSibling.innerHTML = "一般";break;
        case 3:
            this.nextElementSibling.innerHTML = "困难";break;
    }

    p = true;

    if(this.value === opass2.value){
        opass2.nextElementSibling.innerHTML = "一致";
        p2 = true;
    }else{
        opass2.nextElementSibling.innerHTML = "不一致";
        p2 = false;
    }
}
    
opass2.onblur = function(){
    if(this.value === opass.value){
        this.nextElementSibling.innerHTML = "一致";
        p2 = true;
    }else{
        this.nextElementSibling.innerHTML = "不一致";
        p2 = false;
    }
}

otel.onblur = function(){
    var reg = /^1[3-9]\d{9}$/;
    if(reg.test(this.value)){
        this.nextElementSibling.innerHTML = "手机号符合";
        t = true;
    }else{
        this.nextElementSibling.innerHTML = "手机号不符合";
        t = false;
    }
}


obtn.onclick = function(){
    if(u && p && p2 && t){
        alert("提交成功");
    }else{
        if(!u){
            alert("用户名失败")
        }
        if(!p){
            alert("密码失败")
        }
        if(!p2){
            alert("重复密码失败")
        }
        if(!t){
            alert("手机号失败")
        }
    }
}