jQuery validate远程验证跟只显示第一条未通过结果

来源：互联网发布：入门吉他推荐知乎编辑：程序博客网时间：2024/05/20 08:22

项目中用到了validate,稍微看了下文档发现该插件用法不算复杂，在此记录一下使用过程

$(function(){validateRules();});/** * 自定义表单校验规则 */function validateRules(){$('#mainForm').validate({ignore: [], //验证隐藏元素onkeyup:false,rules: {meetingType:{    required:true},userTypeOption:{    required:true},loginName:{required:true,maxlength:30,isName:true,remote:{  //远程验证登录名url:'/userInfo/checkLoginName',// data:{},若没自定义参数,他默认会把表单上name为loginName元素的值发送到后台dataFilter:function (data) {var data = eval('('+data+')');//他需要后台返回的是布尔值,若后台返回的不是布尔值,可以手动给他布尔值return data.code == 2   //1:登录名不可用  2:登录名可用}},//备注:若你后台返回的就是布尔值可以直接这样写//remote:'/userInfo/checkLoginName'},userName:{required:true,maxlength:30},npcNumber:{required:true,digits:true},passWord:{required:true},passWord2:{required:true,equalTo:'#passWord'},mobileNumber:{required:true,isMobile:true,  //该验证规则为自定义规则,代码在下面remote:{  //远程验证手机号url: "/userInfo/checkPhone",dataFilter:function(data){var data = eval('('+data+')');return data.code == 1   //1:手机未注册 -1:手机已注册}}}},messages: {meetingType:{required:'请选择所属大会类型'},userTypeOption:{required:'请选择用户类别'},loginName:{required:'请输入登录名称',maxlength:'登录名称不能超过30个字符',remote:'该登录名已存在服务器'},userName:{required:'请输入用户姓名',maxlength:'用户名称不能超过30个字符'},npcNumber:{required:'请输入代表证号',digits:'请输入数字'},passWord:{required:'请输密码',},passWord2:{required:'请再次输入密码',equalTo:'两次密码输入不一致'},mobileNumber:{required:'请输入手机号',remote:'这个手机号已存在'}},showErrors:function(errorMap,errorList) {//在这里改变他的默认提示消息,本人用的是弹窗的形式,只弹出第一条验证未通过的错误消息if(errorList.length > 0){layer.msg(errorList[0].message,{time:2000})}}});}/** * 扩展自定义验证规则 */jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var reg = /^1[358]{1}\d{9}$/;return this.optional(element) || (length == 11 && reg.test(value));}, "手机号格式不正确");jQuery.validator.addMethod("isName", function(value, element) {var reg = /^[0-9a-zA-Z]{4,20}$/;return this.optional(element) || (reg.test(value));}, "登录名必须是4-20位的字母和数字");

效果图:默认只提示第一条错误信息

0 0