表单验证需要引入的jQuery和jQuery验证器验证js<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');
});//修改错误消息显示位置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);}}