-
validation插件的基本验证方法之一: 1、required:必填校验(true表示必填) 2、remote:远程校验,用于通过访问服务器来校验数据的有效性; 如校验用户名是否存在 remote用法: 1、remote使用get请求访问服务器 访问服务器后返回校验结果:正常的时候返回true,检验不通过的时候返回错误提示信息 remote:url 2、remote使用post/get请求访问服务器 remote:{ url:请求地址 type:请求类型post/get data:{ 需要传递的参数 } } 注意:ajax需要放在服务器上,例如tomcat查看全部
-
客户端验证优点: 1、可以减少服务器压力; 2、缩短用户等待时间提升用户体验 jQuery表单验证插件网址:https;//plugins.jquery.com/tag/validate/ jQuery Validation插件网址:http://jqueryvalidation.org查看全部
-
先引用jquery.js文件,后引用jquery.validation.js文件,因为后者依赖前者 label的for属性规定label与哪个表单元素绑定,当用户点击label时与其绑定的表单元素会获取焦点。 ready事件():当DOM(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时,会触发。 用法如图: rules:定义表单验证的规则 message:用于定义表单验证提示信息 rules和message中使用的都是元素的name属性值,而不是id属性值,rules和message中的验证方法需要一致,这样当某一个验证方法不通过,才能做出对应的提示 比如:rules中使用required:true,则message中使用required:用户名必填,这样当用户名没有填写时则会提示“用户名必填 在js中调用 $(id).validate({ rules:{ username:{ required : true, // 必填 minLength: 2 //最小长度为2 maxLength:10 // 最大长度为10 } }, message:{ username:{ required:"此项不能为空",//若没填显示提示信息 minLength: "最小长度为2", maxLength: "最大长度为10" } } })查看全部
-
jQuery表单验证插件:https;//plugins.jquery.com/tag/validate/ jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/查看全部
-
基本验证方法查看全部
-
Validator对象查看全部
-
$("#form").valid()?"correct":"error"; //valid()方法检查表单或元素是否有效,返回true,false $("username").rules(); //获取表单元素(表单里的某个元素,而不是表单)的校验规则 $("username").rules("add",{min:2,max:10}; //添加规则 $("username").rules("remove","min max"); //删除规则查看全部
-
equalTo()的使用方法 "confirm-password":{ equalTo:"#password" } 其中equalTo后面接的是需要对比的id查看全部
-
number数字 digits整数 equalTo相等查看全部
-
自己也可以编辑查看全部
-
自定义验证方法 $.validator.addMethod(name,method,[message]) name:验证方法名称, method:function(value(验证元素的值),element(被验证的元素),params(验证方法的值)方法逻辑 message:提示消息 代码解释: this.optional(element):元素填写值才会触发的该验证方法,没值不验证 postcode.test(value):对元素的值进行正则表达式判断,符合正则表达式返回true additional-methods.js包含了很多扩展验证方法。在写自定义方法时可以参考这个js库查看全部
-
选择器拓展查看全部
-
validate()方法配置项之四: 1、showErrors:可以显示总共有多少个未通过验证的元素 如:showErrors:function(errorMap,errorList){ errorMap:元素信息和错误信息的键值对 errorList:元素信息、错误信息、验证方法等信息列表 this.defaultShowErrors();//使用默认的错误提示信息展示方式,需要这个否则错误信息不显示了 } 2、errorPlacement:自定义错误信息放在哪里,配合groups一起使用 3、success:要验证的元素通过验证后的动作 如:success:"right" 或 success:function(label){label.addClass("right")} 效果是给错误信息展示label元素的class属性值追加right值 4、highlight:可以给未通过验证的元素加效果 如:highlight:function(element,errorClass,validClass){ //element:绑定验证的元素 //errorClass:验证错误信息展示label的class属性值 //validClass:验证通过信息展示label的class属性值 } 5、unhighlight:去除未通过验证的元素的效果,一般和highlight同时使用,同上查看全部
-
validate()方法配置项 onsubmit:是否在提交时验证,默认值为true onfoucusout:是否在获取焦时验证 onkeyup:是否在敲击键盘时验证 onclick:是否在鼠标点击时验证,一般用于checkbox或者radio focusInvalid:提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的 表单)是否会获得焦点 focusCleanup:当未通过验证的元素获得焦点时,是否移除错误提示 errorClass:指定错误提示的css类名,可以自定义错误提示的样式 validClass:指定验证通过的css类名 errorElement:使用什么标签标记错误 wrapper:使用什么标签把上边的errorElement包起来 errorLaberContainer:把错误信息统一放在一个容器里面 errorContainer:显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏。查看全部
-
rules中的校验方法都可以定义depends属性,表示当条件满足时返回true,则执行校验方法 针对参数为boolean类型的校验方法: required:{ //只有depends:function(element)返回true,required校验方法才起作用 depends:function(element){ //:filled是Validation自带的选择器,匹配填写内容的元素 return $("#password").is(":filled") } } 针对参数为非boolean类型的校验方法如下: maxlength:{ param:2 //只有depends:function(element)返回true,maxlength校验方法的值才设置为2 depends:function(element){ //:filled是Validation自带的选择器,匹配填写内容的元素 return $("#password").is(":filled") } } } groups的使用如下: groups:{login:"username password confirm-password"} //对一组元素进行验证 errorPlacement:function(error,element){ //对一组元素验证后错误信息显示 error.insertBefore("#info");//将一组元素的错误信息都显示在id="info"的元素上 }查看全部
举报
0/150
提交
取消