jQuery技术

jQuery插件学习教程之SlidesJs轮播+Validation验证(2)

字号+ 作者:H5之家 来源:H5之家 2016-08-20 16:07 我要评论( )

validate() – Validates 核心方法$('#demo').validate({rules: {//。。。},messages: {//。。。}}) valid() – 验证表单是否通过,返回true或false$('#taojiaqu').validate()alert($('#taojiaqu').valid()); rules

validate() – Validates 核心方法 $('#demo').validate({ rules: { //。。。 }, messages: { //。。。 } }) valid() – 验证表单是否通过,返回true或false $('#taojiaqu').validate() alert($('#taojiaqu').valid()); rules() – 读取、添加和删除一个元素的规则 $( "#myinput" ).rules();  //返回一个规则对象$( "#myinput" ).rules( "add", { required: true, minlength: 2, messages: { required: "Required input", minlength: jQuery.validator.format("Please, at least {0} characters are necessary") } }); $( "#myinput" ).rules( "remove" );//移除全部 $( "#myinput" ).rules( "remove", "min max" );//移除min max

1.2公共方法

Validator.form() – 验证表单 Validator.element() – 验证指定的 input validator.element( "#myselect" ); Validator.resetForm() – 重置表单 Validator.showErrors() – 显示错误信息 Validator.numberOfInvalids() – 返回错误的字段数

1.3静态方法

jQuery.validator.addMethod( name, method [, message ] ) – 添加自定义验证方法 //返回true或falsejQuery.validator.addMethod("domain", function(value, element) { return this.optional(element) || /^http:\/\/taojiaqu.com/.test(value); }, "错误信息"); jQuery.validator.format( template, argument, argumentN… ) – 格式化字符串 var format=jQuery.validator.format("{0}--{1}--{2}"); console.log(format("a","b","c"));  //a--b--c jQuery.validator.setDefaults() – 修改默认设置 jQuery.validator.setDefaults({ debug: true    //所有的都设置debug模式 }); jQuery.validator.addClassRules() – 统一添加某个类的 校验规则 //添加class为name的校验规则:必填,最小长度为2jQuery.validator.addClassRules("name", { required: true, minlength: 2 });

2.选择器

:blank – 选择value值为空的input

:filled – 选择value有值的input

:unchecked – 选择未被选中的 checkbox

3.验证规则

required – 必填,默认true

remote – 远程请求验证,请求地址返回true或false

minlength – 最小长度,中文字算1个字符

maxlength – 最大长度

rangelength – 给定长度范围,例:[2,5]

min – 最小值,数值型

max – 最大值

range – 给定最大最小取值范围,例:[2,100]

step – 设置步骤

email – 必须是一个邮箱email格式

url – 必须是一个地址url

date – 必须输入正确格式的日期

dateISO – 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性

number – 必须输入合法的数字(负数,小数)

digits – 必须输入整数

equalTo:'#abc' – 输入值必须和#abc相同

以下验证规则需加载——additional-methods.min.js

accept – 验证上传的文件MINE类型,例:accept:"image" ;多种类型逗号(,)隔开

creditcard – 验证信用卡卡号

extension – 验证上传的文件的后缀,例:extension:"dll|exe" ;;多种类型逗号(|)隔开

phoneUS – 验证是否为美国号码

require_from_group – 设置类目中有N个是必填项

mobile_phone: { require_from_group: [1, ".phone-group"]  //这边的1表示 三项中只需要填写一项就可以,后面是class名 }, home_phone: { require_from_group: [1, ".phone-group"] }, work_phone: { require_from_group: [1, ".phone-group"] }

4.validate()方法的配置项

debug — 开启关闭debug模式,阻止提交

$(".selector").validate({ debug: true });

submitHandler — 通过验证后运行的函数,可以加上表单的提交方法

$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } }); $(".selector").validate({ submitHandler: function(form) { form.submit(); } });

invalidHandler — 验证没通过,提交时触发的方法

$(".selector").validate({ invalidHandler: function(event, validator) { //event :自定义事件对象 //validator:当前验证的实例 } });

ignore — 对某些元素不进行验证

$("#myform").validate({ ignore: ".ignore" });

rules — 定义校验规则,有个隐藏的参数 depends:在满足什么条件下才验证次规则

$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } } }); $(".selector").validate({ rules: { name: {    depends:function(element){reruen true;} //返回true的话才校验,name是否必填  }, email: { email: true,    min:{      param:15,  //单独值的话 用param 代替      depends:function(element){reruen true;}    } } } });

messages — 定义提示信息

$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } }, messages: { name: "请输入您的名字", email: { required: "请输入的的邮箱", email: "请输入正确的邮箱地址" } } });

groups — 对一组元素的验证,用一个错误提示,用errorPlacement 控制出错信息的位置

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评