JS正则表达式验证表单

一.解释一些符号相关的意义
     1.  /^$/ 这个是个通用的格式。
         ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
     2. 里面输入需要实现的功能。
        * 匹配前面的子表达式零次或多次；
       + 匹配前面的子表达式一次或多次；
       ？匹配前面的子表达式零次或一次；
       \d  匹配一个数字字符，等价于[0-9]

 

 

二、常用的表单验证代码

 

 checkUserNameflag=false;
 checkPasswordflag=false;
 checkPasswordAgianflag=false;
 checkEmailflag=false;
// 用户名校验
function checkUserName() {
    var username = $("userNeme").value;
    var zz = /^[A-Za-z0-9]{6,}$/;
    if (!zz.test(username)) {
        $("userName_warn").innerHTML = "  × 用户名不符合规范";
        checkUserNameflag=false;
    } else {
        /*$("userName_warn").style.color='blue';
        $("userName_warn").innerHTML = "√ 用户名可用";*/
        showUserExist(username);
        checkUserNameflag=true;
    }
}

//重置提示
function resetWarn(){
    $("userName_warn").innerHTML="";
    $("email_warn").innerHTML="";
    $("password_warn").innerHTML="";
    $("Repassword_warn").innerHTML="";
}
// 密码校验
function checkPassword() {
    var password1 = $("password").value;
    if (password1.length >= 6 && password1.length <= 15) {
        checkPasswordflag = true;
        $("password_warn").style.color='blue';
        $("password_warn").innerHTML = "  √ 密码可用 ";
        checkAgianMiMa();
    } else {
        checkPasswordflag = false;
        $("password_warn").innerHTML = "  × 密码至少为 6 个字符 ";
    }
}

function checkPasswordAgian() {
    var password1 = $("password").value;
    var password2 = $("rePassword").value;
    if (password1 == password2) {
        if (password1 == "") {
            $("Repassword_warn").innerHTML = "  × 请输入密码 ";
            checkPasswordAgianflag = false;
            return;
        }
        
        $("Repassword_warn").style.color='blue';
        $("Repassword_warn").innerHTML = "√ 重复输入密码正确";
        checkPasswordAgianflag = true;
    } else {
        checkPasswordAgianflag = false;
        $("Repassword_warn").innerHTML = "  × 两次密码输入不同 ";
        
    }
}

function checkEmail(){
    //对电子邮件的验证
      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      var email=$("email").value;
      if(!myreg.test(email)){
            checkEmailflag=false;
              $("email_warn").style.color='red';
            $("email_warn").innerHTML = "  × 邮箱格式不符合规范";
        } else {
            checkEmailflag=true;
            $("email_warn").style.color='blue';
            $("email_warn").innerHTML = "√ 邮箱格式正确";
        }
}

function submitCheck(){
    alert(checkUserNameflag);
    if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false
            ||checkPasswordAgianflag==false || checkEmailflag==false){
        return;
    }
}
function $(id){
    return document.getElementById(id);
}