首页要引入相关验证插件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);
}
}