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