2023年6月21日发(作者：)
表单校验插件⾃定义规则校验⼀、jquery插件⽹络上有许多成熟的插件供使⽤者参考，插件就是将jquery实现的常⽤操作进⾏封装，封装后的⼩框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，⽽这些复杂功能的背后实现我们可以不必懂。jQuery Validate 插件为表单提供了强⼤的验证功能，让客户端表单验证变得更简单，同时提供了⼤量的定制选项，满⾜应⽤程序各种需求。该插件捆绑了⼀套有⽤的验证⽅法，包括 URL 和电⼦邮件验证，同时提供了⼀个⽤来编写⽤户⾃定义⽅法的 API。⼆、使⽤Validate插件步骤：1.导⼊js库，将jquery的原始⽂件和插件⽂件导⼊到⼯程中因为validate是JQuery的插件，所以必须先导⼊JQuery和validate的JS包2.编写js代码对表单进⾏验证表单验证的格式：$("form表单的选择器").validate(json数据格式); //键值对 键：值（{}）json数据格式：{ rules:{ 表单项name值:校验规则， 表单项name值:校验规则... ... }, messages:{ 表单项name值:错误提⽰信息， 表单项name值:错误提⽰信息... ... } }代码实例$(function(){ $("#myform").validate({ rules:{ "username":{ "required":true, "checkUsername":true }, "password":{ "required":true, "rangelength":[6,12] }, "repassword":{ "required":true, "rangelength":[6,12], "equalTo":"#password" }, "email":{ "required":true, "email":true }, "sex":{ "required":true } }, messages:{ "username":{ "required":"⽤户名不能为空", "checkUsername":"⽤户名已存在" }, "password":{ "required":"密码不能为空", "rangelength":"密码长度6-12位" }, "repassword":{ "required":"密码不能为空", "rangelength":"密码长度6-12位", "equalTo":"两次密码不⼀致" }, "email":{ "required":"邮箱不能为空", "email":"邮箱格式不正确" } } });});3.⾃定义错误显⽰标签当错误提⽰信息不按照我们预想的位置显⽰时，我们可以按照如下⽅式进⾏设置⾃定义错误显⽰标签放在我们需要显⽰的位置，当此表单项验证不通过时会将此信息⾃动显⽰出来，jquery验证插件会⾃动帮助我们控制它的显⽰与隐藏。三、⾃定义规则校验如果预定义的校验规则尚不能满⾜需求的话可以进⾏⾃定义校验规则步骤1. 使⽤$.hod(“校验规则名称”,function(value,element,params)){}2. 在rules中通过校验规则名称使⽤校验规则3. 在messages中定义该规则对应的错误提⽰信息其中： value是校验组件的value值；element是校验组件的节点对象；params是校验规则的参数代码实例/*⾃定义校验规则，实现ajax异步 */$.hod( //规则的名称 "checkUsername", //校验的函数，这个是验证所调⽤函数（校验函数），传⼊三个参数 function(value,element,params){ //定义⼀个标志 var flag=false; //value:输⼊的内容（表单元素输⼊的内容，如果此时username表单元素绑定了该校验规则，那么value就是在触发此校验规则时，⽤户输⼊的⽤户名） //element:被校验的元素对象 //params：规则对应的参数值（例：在required:true 传⼊的params就是true）
//⽬的：对输⼊的username进⾏ajax校验
$.ajax({ //这⾥必须是同步操作，所以不能使$.post()]和$.get() "async":false, "url":"${tPath}/checkUsername", "data":{"username":value}, type:"POST", "dataType":"json", "success":function(data){ flag=t; } });
//返回false代表该校验器不通过 return !flag;
} //还可以有⼀个参数，检验的提⽰ //，"请正确填写您的邮政编码");
2023年6月21日发(作者：)
表单校验插件⾃定义规则校验⼀、jquery插件⽹络上有许多成熟的插件供使⽤者参考，插件就是将jquery实现的常⽤操作进⾏封装，封装后的⼩框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，⽽这些复杂功能的背后实现我们可以不必懂。jQuery Validate 插件为表单提供了强⼤的验证功能，让客户端表单验证变得更简单，同时提供了⼤量的定制选项，满⾜应⽤程序各种需求。该插件捆绑了⼀套有⽤的验证⽅法，包括 URL 和电⼦邮件验证，同时提供了⼀个⽤来编写⽤户⾃定义⽅法的 API。⼆、使⽤Validate插件步骤：1.导⼊js库，将jquery的原始⽂件和插件⽂件导⼊到⼯程中因为validate是JQuery的插件，所以必须先导⼊JQuery和validate的JS包2.编写js代码对表单进⾏验证表单验证的格式：$("form表单的选择器").validate(json数据格式); //键值对 键：值（{}）json数据格式：{ rules:{ 表单项name值:校验规则， 表单项name值:校验规则... ... }, messages:{ 表单项name值:错误提⽰信息， 表单项name值:错误提⽰信息... ... } }代码实例$(function(){ $("#myform").validate({ rules:{ "username":{ "required":true, "checkUsername":true }, "password":{ "required":true, "rangelength":[6,12] }, "repassword":{ "required":true, "rangelength":[6,12], "equalTo":"#password" }, "email":{ "required":true, "email":true }, "sex":{ "required":true } }, messages:{ "username":{ "required":"⽤户名不能为空", "checkUsername":"⽤户名已存在" }, "password":{ "required":"密码不能为空", "rangelength":"密码长度6-12位" }, "repassword":{ "required":"密码不能为空", "rangelength":"密码长度6-12位", "equalTo":"两次密码不⼀致" }, "email":{ "required":"邮箱不能为空", "email":"邮箱格式不正确" } } });});3.⾃定义错误显⽰标签当错误提⽰信息不按照我们预想的位置显⽰时，我们可以按照如下⽅式进⾏设置⾃定义错误显⽰标签放在我们需要显⽰的位置，当此表单项验证不通过时会将此信息⾃动显⽰出来，jquery验证插件会⾃动帮助我们控制它的显⽰与隐藏。三、⾃定义规则校验如果预定义的校验规则尚不能满⾜需求的话可以进⾏⾃定义校验规则步骤1. 使⽤$.hod(“校验规则名称”,function(value,element,params)){}2. 在rules中通过校验规则名称使⽤校验规则3. 在messages中定义该规则对应的错误提⽰信息其中： value是校验组件的value值；element是校验组件的节点对象；params是校验规则的参数代码实例/*⾃定义校验规则，实现ajax异步 */$.hod( //规则的名称 "checkUsername", //校验的函数，这个是验证所调⽤函数（校验函数），传⼊三个参数 function(value,element,params){ //定义⼀个标志 var flag=false; //value:输⼊的内容（表单元素输⼊的内容，如果此时username表单元素绑定了该校验规则，那么value就是在触发此校验规则时，⽤户输⼊的⽤户名） //element:被校验的元素对象 //params：规则对应的参数值（例：在required:true 传⼊的params就是true）
//⽬的：对输⼊的username进⾏ajax校验
$.ajax({ //这⾥必须是同步操作，所以不能使$.post()]和$.get() "async":false, "url":"${tPath}/checkUsername", "data":{"username":value}, type:"POST", "dataType":"json", "success":function(data){ flag=t; } });
//返回false代表该校验器不通过 return !flag;
} //还可以有⼀个参数，检验的提⽰ //，"请正确填写您的邮政编码");
发布评论