JS正則表達式驗證表單

一.解釋一些符號相關的意義
     1.  /^$/ 這個是個通用的格式。
         ^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結束位置
     2. 裏面輸入須要實現的功能。
        * 匹配前面的子表達式零次或屢次；
       + 匹配前面的子表達式一次或屢次；
       ？匹配前面的子表達式零次或一次；
       \d  匹配一個數字字符，等價於[0-9]

 

 

2、經常使用的表單驗證代碼

 

 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);
}