jquery.validation验证通过ajax验证提示错误信息

首页要引入相关验证插件js和jQuery插件
<script type="text/javascript" src="${ctxPath}/static/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/plugins/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/plugins/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/plugins/jquery.validation/1.14.0/messages_zh.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/plugins/layer/2.1/layer.js"></script>


表单信息
<form action=""  id="regist_form"  class="forms">
    <div class="errorPlacement"></div>
<p><input type="text" name="mobile" id="user_mobile" value="" maxlength="11" placeholder="请输入您的手机号"/></p>
<label class="psw-test"></label>
<p><input type="password" name="password" id="psw" value="" maxlength="20" placeholder="请输入密码,6-32个字符,只能由字母或数字组成"/></p>
<label class="twopsw-test"></label>
<p><input type="password" name="againPassword" id="repeat-psw" value="" maxlength="32"  placeholder="请输入确认密码"/></p>
<label class="telnum-test"></label>
<div class="tels">
<input type="text" name="code" id="tel-number" value="" maxlength="6"  placeholder="请输入手机验证码" />
<div class="submints">
<button class="repeat-psw-right" type="button" id="btn_setTimeSignUp">发送验证码</button>
</div>
</div>
<div class="agreement">
<input type="checkbox" name="term" id="cbox" />
<p class="agreement-right">我已经阅阅读并同意
</p>
</div>
<input type="submit"  class="regist"  value="立即注册">
</form>
验证js
var validator;
$(function(){
//验证注册
validator=$("#regist_form").validate({
    rules:{
    mobile:{
            required:true,
            isMobile:true,
            checkMobile:true,
            maxlength:11
        },
        password:{
            required:true,
            minlength:6,
            maxlength:32,
            checkPassword:true
        },
        againPassword:{
            required:true,
            minlength:6,
            maxlength:20,
            equalTo:"#psw"
        },
        code:{
            required:true,
            maxlength:6
        },
        term:{
            required:true
        }
    },
    messages:{
    mobile:{
            required:"请输入手机号"
        },
        password:{
            required:"请输入密码"
        },
        againPassword:{
            required:"请输入确认密码",
            equalTo: "两次密码输入不一致"
        },
        code:{
            required:"请输入手机验证码"
        },
        term:{
            required:"请阅读条款协议"
        }
    },
    focusCleanup:false,
    errorPlacement: function(error, element) { //错误信息位置设置方法
        error.appendTo( $(element).parents('form').children('.errorPlacement') ); //这里的element是录入数据的对象
    },
    submitHandler:function(form){
    var param = $("#regist_form").serialize();  
$.ajax({
        type:"POST",
        url:"/register",
        data:param,
            dataType:"json",
        success:function(result){
        if(result.code==1000){
          layer.msg('注册成功',{icon:1,time:2000},function(){
        window.location.href="/login";
          });
    }else if(result.code==1001||result.code==1002){
    errorTis('user_mobile',result.msg);
    }else{
    layer.msg(result.msg,{icon:2,time:2000});
    }
        }
        });
    }
}); 


ajax提交并且替换错误提示信息
jQuery.validator.addMethod('checkMobile', function (value, element) {
var msgcode=null;
$.ajax({
         url: "/member/checkMobile",
         type: "post",
         async:false,
         data: {"mobile":value},
         success: function(result){
        if(typeof data == "string"){
        msgcode= result.code;
             }else{
            msgcode= result.code;
             }
         }
     })
    if(msgcode==1001){
        $(element).data('error-msg','该手机号码已被注册');
        return false;
    }
    if(msgcode==1002){
        $(element).data('error-msg','手机号码格式不正确');
        return false;
    }
    return true;
}, function(params, element) {
    return $(element).data('error-msg');
});
    
jQuery.validator.addMethod("checkPassword",function(value, element) {       
        return this.optional(element) || /^[0-9a-zA-Z]{6,32}$/g.test(value);       
}, "密码只能由6-32位字母或数字组成 ");




//修改错误消息显示位置
function errorTis(ele,text){
     var $errorPlacement = $('#'+ele).parents('form').children('.errorPlacement');
     if($($errorPlacement).children('label').length!=0){
         if($($errorPlacement).children($('label[for='+ele+']'))){
             $($errorPlacement).children($('label[for='+ele+']')).html(text).show();
         }else{
             var aa = '<label class="error" id='+ele+'-error for='+ele+'>'+text+'</label>';
             $errorPlacement.prepend(aa);
         }
     }else{
         var aa = '<label class="error" id='+ele+'-error for='+ele+'>'+text+'</label>';
         $errorPlacement.prepend(aa);
     }
 }

猜你喜欢

转载自blog.csdn.net/semial/article/details/80688469