Javascript常用前臺表單驗證

1，前臺界面

<form action="">
    <div class="mail">
        <label for="mail"><span class="red">*</span>郵箱地址</label>
        <input type="email"  id="mail" name="info[mail]" onblur="onblurFunc(this);" value="" autocomplete="off" maxlength="50">
        <span class="join-input-tip"></span>
    </div>
    <div class="passwd">
        <label for="passwd"><span class="red">*</span>登錄密碼</label>
        <input type="password"  id="passwd" name="info[passwd]" onblur="onblurFunc(this);" maxlength="16">
        <span  class="join-input-tip"></span>
    </div>
    <div class="passwd_confirm">
        <label for="passwd_confirm"><span class="red">*</span>確認密碼</label>
        <input type="password"  id="passwd_confirm" name="info[passwd_confirm]" onblur="onblurFunc(this)" maxlength="16">
        <span  class="join-input-tip"></span>
    </div>
    <div class="username">
        <label for="username"><span class="red">*</span>姓名</label>
        <input type="text"  id="username" name="info[name]" onblur="onblurFunc(this)" value="" maxlength="20">
        <span  class="join-input-tip"></span>
    </div>
    <div class="sex">
        <label for="username"><span class="red">*</span>性別&nbsp;&nbsp;</label>
        <input id="boy" type="radio" value="1" name="info[sex]" title="男" >
        <label for="boy"> 男 </label>
        <input id="girl" type="radio" value="2" name="info[sex]" title="女" >
        <label for="girl"> 女 </label>
    </div>
    <div class="idcard">
         <label for="idcard"><span class="red">*</span>身份證</label>
        <input type="text"  id="idcard" name="info[idcard]" onblur="onblurFunc(this)" maxlength="18" value="">
        <span  class="join-input-tip"></span>
    </div>
    <div class="phone">
        <label for="phone"><span class="red">*</span>手機號碼</label>
        <input type="tel"  id="phone" name="info[phone]" onblur="onblurFunc(this)" maxlength="11" value="">
        <span  class="join-input-tip"></span>
    </div>
</form>

2，javascript前端驗證代碼

// @charset "utf-8";

// 判斷表單必選項是否填寫
function onblurFunc(obj){
    var objID = $(obj).attr('id');

    if(objID == 'mail'){
        checkMail(obj); // 校驗郵箱
    }
    else if(objID == 'passwd'){
        checkPasswd(obj);   // 校驗密碼
    }
    else if(objID == 'passwd_confirm'){
        checkPasswdConfirm(obj);    // 校驗重複密碼
    }
    else if(objID == 'username'){
        checkName(obj); // 校驗姓名
    }
    else if(objID == 'phone'){
        checkPhone(obj);    // 校驗手機號
    }
    else if(objID == 'idcard'){
        checkIDCard(obj);   // 校驗身份證
    }

}

// 校驗郵箱
function checkMail(obj){
    var value = $(obj).val();
    var mailReg =  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!value){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('郵箱不能爲空！');
        $(obj).next().show();
        return false;
    }
    if(!mailReg.test(value)){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('請輸入正確的郵箱格式！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
    $.ajax({
        type:'get',
        url:'/default/user/ajaxCheckAccountExist/?account='+value,
        cache:true,
        error:function(e){},
        success:function(data){
            if(data['result'] == 1){
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('此郵箱已被註冊，請檢查郵箱是否正確！');
                $(obj).next().show();
            }
            else if(data['result'] == 0){
                $(obj).css({'border-color':'#ccc'});
                $(obj).next().hide();
                $(obj).next().text('');
            }
            else {
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('請檢查郵箱是否正確！');
                $(obj).next().show();
            }
        }
    });
}

// 校驗密碼
function checkPasswd(obj){
    var value = $(obj).val();
    if(!value ){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('密碼不能爲空！');
        $(obj).next().show();
        return false;
    }
    if(value.length < 6 || value.length >16){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('密碼長度爲6~16位！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
}

// 校驗重複密碼
function checkPasswdConfirm(obj){
    var value = $(obj).val();
    if(!value){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('密碼不能爲空！');
        $(obj).next().show();
        return false;
    }
    var passValue = $("#passwd").val();
    if(value != passValue){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('密碼不一致！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
}

// 校驗姓名
function checkName(obj){
    var value = $(obj).val();
    if(!value){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('姓名不能爲空！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
}

// 校驗手機號
function checkPhone(obj){
    var value = $(obj).val();
    var reg = /^1\d{10}$/;
    if(!value){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('手機號不能爲空！');
        $(obj).next().show();
        return false;
    }
    if(value.length != 11){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('手機號格式錯誤！');
        $(obj).next().show();
        return false;
    }
    if(!reg.test(value)){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('手機號格式不正確！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
    $.ajax({
        type:'get',
        url:'/default/user/ajaxCheckPartExist/?phone='+value,
        cache:true,
        error:function(e){},
        success:function(data){
            if(data['result'] == 1){
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('此手機號已被註冊，請檢查手機號是否正確！');
                $(obj).next().show();
            }
            else if(data['result'] == 0){
                $(obj).css({'border-color':'#ccc'});
                $(obj).next().hide();
                $(obj).next().text('');
            }
            else {
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('請檢查手機號是否正確！');
                $(obj).next().show();
            }
        }
    });
}


// 校驗身份證
function checkIDCard(obj){
    var value = $(obj).val();
    if (!value) {
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('身份證號碼不能爲空！');
        $(obj).next().show();
        return false;
    }
    if(value.length > 18 || value.length < 15){
        $(obj).css({'border-color':'#ff3f13'});
        $(obj).next().text('身份證號碼格式錯誤！');
        $(obj).next().show();
        return false;
    }
    $(obj).css({'border-color':'#ccc'});
    $(obj).next().hide();
    $(obj).next().text('');
    $.ajax({
        type:'get',
        url:'/default/user/ajaxCheckPartExist/?idcard='+value,
        cache:true,
        error:function(e){},
        success:function(data){
            if(data['result'] == 1){
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('此身份證號碼已被註冊！');
                $(obj).next().show();
            }
            else if(data['result'] == 0){
                $(obj).css({'border-color':'#ccc'});
                $(obj).next().hide();
                $(obj).next().text('');
            }
            else {
                $(obj).css({'border-color':'#ff3f13'});
                $(obj).next().text('請檢查身份證號碼是否正確！');
                $(obj).next().show();
            }
        }
    });
}


// 區分PC和手機
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}