2023年6月21日发(作者：)

JQuery表单验证+ligerUI⾃动表单⼀、JQuery 表单验证插件——Validation Validation是历史悠久的JQuery插件之⼀，经过多年的项⽬验证，得到了开发者的⼀致好评。1、特点：1）内置验证规则：拥有必填、数字、Email、URL和信⽤卡号码等19类内置验证规则2）⾃定义验证规则：可以很⽅便⾃定义验证规则3）简单强⼤的验证信息提⽰：默认了验证信息提⽰，并⽀持⾃定义提⽰信息覆盖默认提⽰4）实时验证：可以通过keyup（每次按键时）或blur（当控件失去焦点时）事件触发验证，⽽不仅仅是在表单提交的时候验证2、使⽤步骤（1）引⼊JQUery库和Validation插件

（2）设定验证规则(项⽬实例) $('#form').validate({ event: "keyup", rules: { ApplTimelength: { required: true, digits: true, maxlength: 4 }, LeaderSelect: { required: true }, Reason: { required: true, maxlength: 100 }, Type: { required: true } }, messages: { ApplTimelength: { required: "请输⼊借阅天数", digits: "时间必须为整数", maxLength: "时间不能长于4位" }, LeaderSelect: { required: "请选择审批领导" }, Reason: { required: "请输⼊借阅理由", maxLength: "字数不能超过100" }, Type: { required: "请选择借阅类型" } }, errorPlacement: function (lable, element) { ip({ content: (), appendIdTo: lable }); }, }, success: function (lable) { ideTip(); } });

代码说明： 是触发校验的⽅式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使⽤这个参数时就只在按提交按钮时触发2.如果在提交前还需要进⾏⼀些⾃定义处理使⽤submitHandler 参数，其它的都⽐较简单，详细信息可在API中查阅. 如果这个参数为true，那么表单不会提交，只进⾏检查，调试时⼗分⽅便. 所有的检验规则都写在这个参数⾥⾯.校验规则参数格式为：ID:{rule1,rule2,...}(1) required: true 必输(2) number: true 只能输⼊数字(包括⼩数)(3) digits:true 只能输⼊整数(4) minValue: 3 不能⼩于3(5) maxValue: 100 最⼤不超过100(6) rangeValue:[50,100] 值范围为50-100(7) minLength: 5 最⼩长度(汉字算⼀个字符)(8) maxLength: 10 最⼤长度(汉字算⼀个字符)(9) rangeLength:[5,10] 长度范围为5⾄10位(汉字算⼀个字符)(10) 上⾯的minLength, maxLength, rangeLength 这三项除了text input之外还可以⽤于checkbox,select这两种控件(11) email:true 电⼦邮件(12) equalTo: "#field" 与#field值相同(13) dateISO:true ⽇期型，格式为1998/01/22 1999-12-12

es ，⾃定义错误信息，格式与rules类似，需要注意的是如果使⽤此项，那么所有的校验项都必需⾃定义出错信息，如果只想定义其中的某⼀些，那么就把其它的出错信息定义为空（即""），系统即会使⽤默认值。扩展：（⼀）⾃定义校验规则可以通过⾃定义检验函数的⽅式新增加校验规则，步骤如下：1. 在定义校验规则之前定义⼀个新的⽅法2. 在rules中指定这个某个域使⽤此校验规则3. 在messages中指定这个域使⽤此校验规则没有通过的提⽰信息 将校验规则写到控件中将校验规则写到控件中//这⾥定义了⼀个名为equal的规则 //value是指当前校验域的值 //element是指当前检验的域 //param是指在rules中设定的参数 //这三个参数会在进⾏校验时由系统⾃动带⼊ $. = function(value, element, param){ //在这⾥使⽤上⾯的三个参数进⾏校验 if(value == param) return true; //如果当前域的值等于指定的参数就通过校验 }; $('#form1').validate({ rules:{ field1:{equal:20 }//在这⾥指定field1的检验规则是equal，并且参数是20 }, messages:{ field1:{equal:'您的计算有误！'}//在这⾥定义field1的equal规则校验出错后的提⽰信息 } });

（⼆）将校验规则写到控件中有时候我们的控件是动态⽣成的，这个时候就不可能提前先写好校验规则，需要在⽣成控件的同时写校验规则.这样写校验规则有两种写法，⼀是将规则写到class属性中，⼆是将规则写到单独的validate属性中，其中：写到class属性的写法如下，例⼦中在规则前添加了名为some, other, styles 的三个class：

（2）设定验证规则(项⽬实例) $('#form').validate({ event: "keyup", rules: { ApplTimelength: { required: true, digits: true, maxlength: 4 }, LeaderSelect: { required: true }, Reason: { required: true, maxlength: 100 }, Type: { required: true } }, messages: { ApplTimelength: { required: "请输⼊借阅天数", digits: "时间必须为整数", maxLength: "时间不能长于4位" }, LeaderSelect: { required: "请选择审批领导" }, Reason: { required: "请输⼊借阅理由", maxLength: "字数不能超过100" }, Type: { required: "请选择借阅类型" } }, errorPlacement: function (lable, element) { ip({ content: (), appendIdTo: lable }); }, }, success: function (lable) { ideTip(); } });

代码说明： 是触发校验的⽅式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使⽤这个参数时就只在按提交按钮时触发2.如果在提交前还需要进⾏⼀些⾃定义处理使⽤submitHandler 参数，其它的都⽐较简单，详细信息可在API中查阅. 如果这个参数为true，那么表单不会提交，只进⾏检查，调试时⼗分⽅便. 所有的检验规则都写在这个参数⾥⾯.校验规则参数格式为：ID:{rule1,rule2,...}(1) required: true 必输(2) number: true 只能输⼊数字(包括⼩数)(3) digits:true 只能输⼊整数(4) minValue: 3 不能⼩于3(5) maxValue: 100 最⼤不超过100(6) rangeValue:[50,100] 值范围为50-100(7) minLength: 5 最⼩长度(汉字算⼀个字符)(8) maxLength: 10 最⼤长度(汉字算⼀个字符)(9) rangeLength:[5,10] 长度范围为5⾄10位(汉字算⼀个字符)(10) 上⾯的minLength, maxLength, rangeLength 这三项除了text input之外还可以⽤于checkbox,select这两种控件(11) email:true 电⼦邮件(12) equalTo: "#field" 与#field值相同(13) dateISO:true ⽇期型，格式为1998/01/22 1999-12-12

es ，⾃定义错误信息，格式与rules类似，需要注意的是如果使⽤此项，那么所有的校验项都必需⾃定义出错信息，如果只想定义其中的某⼀些，那么就把其它的出错信息定义为空（即""），系统即会使⽤默认值。扩展：（⼀）⾃定义校验规则可以通过⾃定义检验函数的⽅式新增加校验规则，步骤如下：1. 在定义校验规则之前定义⼀个新的⽅法2. 在rules中指定这个某个域使⽤此校验规则3. 在messages中指定这个域使⽤此校验规则没有通过的提⽰信息 将校验规则写到控件中将校验规则写到控件中//这⾥定义了⼀个名为equal的规则 //value是指当前校验域的值 //element是指当前检验的域 //param是指在rules中设定的参数 //这三个参数会在进⾏校验时由系统⾃动带⼊ $. = function(value, element, param){ //在这⾥使⽤上⾯的三个参数进⾏校验 if(value == param) return true; //如果当前域的值等于指定的参数就通过校验 }; $('#form1').validate({ rules:{ field1:{equal:20 }//在这⾥指定field1的检验规则是equal，并且参数是20 }, messages:{ field1:{equal:'您的计算有误！'}//在这⾥定义field1的equal规则校验出错后的提⽰信息 } });

（⼆）将校验规则写到控件中有时候我们的控件是动态⽣成的，这个时候就不可能提前先写好校验规则，需要在⽣成控件的同时写校验规则.这样写校验规则有两种写法，⼀是将规则写到class属性中，⼆是将规则写到单独的validate属性中，其中：写到class属性的写法如下，例⼦中在规则前添加了名为some, other, styles 的三个class：