2021年了，你还不会validate的使用呀，快看过来

大家好，欢迎来到IT知识分享网。

1、validate的引用

#jQuery 有很多表单验证插件 #
https://plugins.jquery.com/tag/validate

#最常用的插件之一 #
http://jqueryvalidation.org

//validate插件依赖于jquery，所以需要如此引用 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

2、基本校验使用（标签上的为空及长度等验证）

<form action="" class="demoform" id="demoForm"> <div class="index-form"> <div class="common-form-label">姓名：</div> <div class="common-input"> <!-- 插件带有基本的校验规则，比如 data-rule-required="true"为空校验等--> <input type="text" name="name" placeholder="请输入学生姓名" data-rule-required="true" data-msg-required="请输入竞赛学生姓名" data-rule-minlength="5" data-msg-minlength="最少需要5个字符" > </div> </div> <div class="index-form"> <input type="submit" value="查询" class="sk-btn"> </div> </form>

3、远程校验 remote

$('#demoForm').validate({ debug:true,//加debug，表单就不会提交，适合调试 rules:{//规则,规则的操作对象，都是其name属性 name="name" name:{ //name.php 表示接口，在输入后，会远程校验name的输入值 // remote:'name.php' //默认是get请求，参数是name的输入值 remote:{ url:"tel.php", type:"post", //参数是name输入值和当前时间 data:{ loginTime:function(){ return +new Date;//当前时间 } }, } }, }, messages:{//提示信息 name:{ remote:"用户已存在" //远程校验的错误信息 } }, invalidHandler : function(event,validator){ //console.log("错误数："+validator.numberOfInvalids())； return false;//invalidHandler 无效表单提交后允许的函数 }, submitHandler : function(form) { //验证通过后允许的函数 //console.log($(form).serialize()) }, });

4、基本验证方法

 rules:{//规则 tel:{ rangelength:[1,10], //长度范围 range:[3,8]//数字的范围 email:true,//合法的邮件 url:true,//合法的url date:true } }, messages:{//提示信息 tel:{ rangelength:"请控制应该在2-10位", range:"请控制在3，8，包括3和8之间" } },

//equalTo 常用语密码的确认输入 rules:{//规则 psssword:{ required:true }, "confirm-password":{ equalTo:"#password" //对应校验的选择器 } }, messages:{ "confirm-password":{ equalTo:"两次输入的密码不一致" } }

5*、valid() 方法

1、检查表单或者某些元素是否有效

alert( $perRegForm.valid()?"填写正确":"填写错误")

2、校验规则

//操作对象：表单元素 $('.username').rules();//获取元素的校验规则 $('.username').rules('add',{minlength:2,maxlenght:10}); //新增 $('.username').rules('remove','minlength maxlenght'); //删除

6*、Validator对象

validate方法返回的是validate对象( 如下：oValidator就是 validate对象 ) var oValidator= $('#demoForm').validate({ debug:true }); 

6、Validator 对象有很多有用的方法

validator.form();//验证表单是否有效，返回true/false validator.element('.username');//验证某个元素是否有效，返回true/false validator.resetForm();//把表单恢复验证前原来的状态 validator.showErrors();//针对某个元素显示特定的错误信息 validator.numberOfInvalids();//返回无效的元素数量 //方法实例 oValidator.showErrors({ name:"我是针对指定name的错误信息，hoho" })

//举例子 //为class为txt的新增验证规则 $.validator.addClassRules({ txt:{ required:true, minlength:5 } })

1、validate方法配置项

1）ignore 和 depends

var oValidator= $('#demoForm').validate({ debug:true, //ignore:":hidden",//ignore默认对隐藏的元素不进行校验 ignore:'.name',//对某些元素不进行验证 //depends 隐形规则 rules:{ username:{ required:{ //depends 隐形规则，depends返回ture的时候，再执行required depends:function(element){ return $("#password").is(":filled"); //密码校验正确后 } }, //带参数的 minlength:{ param:2, depends:function(element){ return $("#password").is(":filled"); //密码校验正确后 } } },//name end },//rules end });

2）groups

//groups 对一组元素的验证，用一个错误提示， //+用errorPlacement控制（把出错信息放在哪里） var oValidator= $('#demoForm').validate({ debug:true, groups:{ //name 等表示元素name属性 login:"name username password confirm-password" }, errorPlacement:function(error,element){ //error表示错误信息，element表示出错的元素 error.insertBefore('#info'); } });

3) focusInvalid 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点

var oValidator= $('#demoForm').validate({ debug:true, focusInvalid:true ,//设置true表示 ：光标会定位在第一个出错的元素 focusCleanup:true,// 设置true表示：光标定位元素时，会移除该元素的错误提示 });

4）class 相关的配置项

如果不配置，会生成如下默认的class，如下：

var oValidator= $('#demoForm').validate({ debug:true, errorClass:"wrong", //校验没通过生成wrong，默认是error（即：name所在元素+产生的label元素） validClass:"right"//校验通过生成right，默认是valid（即：name所在元素） });

进阶class

var oValidator= $('#demoForm').validate({ debug:true, //<label id="name-error" class="wrong success" for="name"></label> success:'success',//针对label元素 //highlight和unhighlight 针对元素本身 highlight:function(element,errorClass,validClass){ $(element).addClass('validClass').removeClass('validClass'); }, unhighlight:function(element,errorClass,validClass){ $(element).addClass('validClass').removeClass('valivalidClassdClass'); }, });

选择器扩展

$('input:blank').length; 

4章、自定义验证方法

 $('#demoForm').validate({ debug:true, rules:{ username:{ required:true, postcode:true,//这个是自定义方法， postcode2:"中国",//带参数的youbian } } }); // 加一个验证方法 $.validator.addMethod("postcode",function(){ var postcode=/^[0-9]{6}/; //需求：我们的元素不为空，才需要验证，就需要加上 this.optional(element),没值不验证，直接返回true return this.optional(element) || (postcode.test(value)); },"请填写正确的邮编！") // 信息：请填写正确的中国邮编 $.validator.addMethod("postcode2",function(){ var postcode2=/^[0-9]{6}/; return this.optional(element) || (postcode2.test(value)); },$.validator.format( "请填写正确的{0}邮编！"))

additional-methods.js 包含了很多扩展验证方法

//也可以自定义一个jquery.validate.config.js 用来放自定义的验证方法 require(['dist/jquery.validate.min'],function(){ if(jQuery.validator != undefined && jQuery.validator.length > 0) { jQuery.validator.addMethod("isLegalCharacter", function(value, element) { var regPattern = /^[^\|<>]*$/; return this.optional(element) || (regPattern.test(value)); }, "有奇怪的字符出现哦~~"); jQuery.validator.addMethod("CN", function(value, element) { var regPattern = /^[\u4e00-\u9fa5]+$/;//中文验证 return this.optional(element) || regPattern.test(value); }, "请输入中文"); } });

5章：安全性

客户端安全性：

在数据被输入程序前必须对数据合法性的校验。非法输入问题是最常见的web应用程序安全漏洞。

所有提交的表单数据，都必须验证两次，即提交前在客户端验证，提交后在服务器端再次验证。保证数据的合法性。

服务器端不要相信任何的客户端数据！