3.注册登录项目制作JavaScript部分

部分设置不是非常完美 有待后期学习优化

function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
var userAccount = byId("userAccount"),
    userPass = byId("userPass"),
    userPassA = byId("userPass_"),
    userName = byId("userName"),
    information = byId("information"),
    mall = byId("email"),
    tell = byId("tell");
var tijiao = byId("tijiao"),
    choose = byId("choose");
var st1 = byId("str_1"),test1 = false;
var st2 = byId("str_2"),test2 = false;
var st3 = byId("str_3"),test3 = false;
var st4 = byId("str_4"),test4 = false;
var st5 = byId("str_5"),test5 = false;
var st6 = byId("str_6"),test6 = false;
var st7 = byId("str_7"),test7 = false;
//var st=document.querySelectorAll("str_");
//当鼠标离开用户名输入框时产生验证效果
userAccount.onblur=function(){
    //alert(111);
    var min = /^\w{6,18}$/;
    if (this.value=="") {
        st1.innerHTML="用户名不能位空";
        st1.style.color="red";
        test1 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!min.exec(userAccount.value)) {
            st1.innerHTML="请输入6-18位数字，字母，下划线_";
            st1.style.color="red";
            test1 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st1.innerHTML="格式正确";
        st1.style.color="blue";
        test1 = true;
    }
}
}
//当鼠标离开密码输入框时产生验证效果
userPass.onblur=function(){
    //alert(111);
    var pass = /^\w{6,20}$/;
    if (this.value=="") {
        st2.innerHTML="密码不能位空";
        st2.style.color="red";
        test2 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!pass.exec(userPass.value)) {
            st2.innerHTML="请输入6-20位数字，字母，下划线_";
            st2.style.color="red";
            test2 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st2.innerHTML="密码输入完成";
        st2.style.color="blue";
        test2 = true;
    }
}
}
//当鼠标离开确认密码输入框时产生验证效果
userPassA.onblur=function(){
    //alert(111);
    var passA = /^\w{6,20}$/;
    if (this.value=="") {
        st3.innerHTML="密码不能位空";
        st3.style.color="red";
        test3 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (userPassA.value!==userPass.value) {
            st3.innerHTML="两次输入密码不一致,请重新输入";
            st3.style.color="red";
            test3 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st3.innerHTML="确认密码成功";
        st3.style.color="blue";
        test3 = true;
    }
}
}
//当鼠标离开真实姓名输入框时产生验证效果
userName.onblur=function(){
    //alert(111);
    var oppo = /^[\u4e00-\u9fa5]{2,5}$/;
    if (this.value=="") {
        st4.innerHTML="姓名不能位空";
        st4.style.color="red";
        test4 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!oppo.exec(userName.value)) {
            st4.innerHTML="请输入2-5个字符的有效真实姓名";
            st4.style.color="red";
            test4 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st4.innerHTML="姓名确认成功";
        st4.style.color="blue";
        test4 = true;
    }
}
}
//当鼠标离开真实身份证号输入框时产生验证效果
information.onblur=function(){
    //alert(111);
    var info = /^[1234568]\d{16}[\dXx]$/;
    if (this.value=="") {
        st5.innerHTML="身份证号码不能为空";
        st5.style.color="red";
        test5 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!info.exec(information.value)) {
            st5.innerHTML="请输入18位有效的身份证号码";
            st5.style.color="red";
            test5 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st5.innerHTML="身份证验证成功";
        st5.style.color="blue";
        test5 = true;
    }
}
}
//当鼠标离开邮箱输入框时产生验证效果
mall.onblur=function(){
    //alert(111);
    //var eml = /^[0-9A-Za-z\-_\.]@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
    var eml = /^\w+@\w+\.[a-zA-Z_]{2,4}$/;
    if (this.value=="") {
        st6.innerHTML="邮箱地址不能为空";
        st6.style.color="red";
        test6 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!eml.exec(mall.value)) {
            st6.innerHTML="请输入有效的邮箱地址";
            st6.style.color="red";
            test6 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st6.innerHTML="邮箱验证成功";
        st6.style.color="blue";
        test6 = true;
    }
}
}
//当鼠标离开电话号码输入框时产生验证效果
tell.onblur=function(){
    //alert(111);
    var dianhua = /^[1-9]\d{2,10}$/;
    if (this.value=="") {
        st7.innerHTML="手机号码不能为空";
        st7.style.color="red";
        test7 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        if (!dianhua.exec(tell.value)) {
            st7.innerHTML="请输入3-11位有效的手机号码";
            st7.style.color="red";
            test7 = false;//不添加这个test1 = false;的话 就会有 再全部填写好后勾选成功提交后删除value值后还可以再次提交的bug
    } else {
        st7.innerHTML="手机验证成功";
        st7.style.color="blue";
        test7 = true;
    }
}
}
tijiao.onclick = function(){
    if(test1==false || test2==false || test3==false || test4==false || test5==false || test6==false || test7==false){
        alert("您填写的信息有误！请全部通过后再来提交");
    } else if(choose.checked == false){
        alert("请您先阅读确认勾线遵守规定手册");
    } else {
        alert("您以提交成功");
    }
}