jQuery技术

jQuery Validate(其实JQuery的详细教程也在这了)(4)

字号+ 作者:H5之家 来源:H5之家 2017-02-17 18:03 我要评论( )

radio 的 required 表示必须选中一个。 input type=radio id=gender_male value=m name=gender class={required:true} /input type=radio id=gender_female value=f name=gender/ checkbox 的 required 表示必须选

radio 的 required 表示必须选中一个。

<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" /> <input type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" /> <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}"> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option> </select>

select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option> </select> jQuery.validate 中文 API

名称 返回类型 描述

validate(options) Validator 验证所选的 FORM。

valid() Boolean 检查是否验证通过。

rules() Options 返回元素的验证规则。

rules("add",rules) Options 增加验证规则。

rules("remove",rules) Options 删除验证规则。

removeAttrs(attributes) Options 删除特殊属性并且返回它们。

自定义选择器

:blank Validator 没有值的筛选器。

:filled Array <Element> 有值的筛选器。

:unchecked Array <Element> 没选择的元素的筛选器。

实用工具

jQuery.format(template,argument,argumentN...) String 用参数代替模板中的 {n}。

Validator

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。

名称 返回类型 描述

form() Boolean 验证 form 返回成功还是失败。

element(element) Boolean 验证单个元素是成功还是失败。

resetForm() undefined 把前面验证的 FORM 恢复到验证前原来的状态。

showErrors(errors) undefined 显示特定的错误信息。

Validator 函数

setDefaults(defaults) undefined 改变默认的设置。

addMethod(name,method,message) undefined 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。

addClassRules(name,rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。

addClassRules(rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

内置验证方式

名称 返回类型 描述

required() Boolean 必填验证元素。

required(dependency-expression) Boolean 必填元素依赖于表达式的结果。

required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。

remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。

minlength(length) Boolean 设置最小长度。

maxlength(length) Boolean 设置最大长度。

rangelength(range) Boolean 设置一个长度范围 [min,max]。

min(value) Boolean 设置最小值。

max(value) Boolean 设置最大值。

email() Boolean 验证电子邮箱格式。

range(range) Boolean 设置值的范围。

url() Boolean 验证 URL 格式。

date() Boolean 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。

dateISO() Boolean 验证 ISO 类型的日期格式。

dateDE() Boolean 验证德式的日期格式(29.04.1994 或 1.1.2006)。

number() Boolean 验证十进制数字(包括小数的)。

digits() Boolean 验证整数。

creditcard() Boolean 验证信用卡号。

accept(extension) Boolean 验证相同后缀名的字符串。

equalTo(other) Boolean 验证两个输入框的内容是否相同。

phoneUS() Boolean 验证美式的电话号码。

validate ()的可选项

描述 代码

debug:进行调试模式(表单不提交)。 $(".selector").validate ({ debug:true })

把调试设置为默认。 $.validator.setDefaults({ debug:true })

submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 $(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } })

ignore:对某些元素不进行验证。 $("#myform").validate({ ignore:".ignore" })

 

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

相关文章
  • jQuery Selector选择器小结

    jQuery Selector选择器小结

    2017-02-18 10:12

  • nodejs HTML分析利器node

    nodejs HTML分析利器node

    2017-02-17 17:03

  • jQuery.Deferred对象

    jQuery.Deferred对象

    2017-02-17 13:01

  • 《jQuery实战(第三版)》(Bear Bibeault)【摘要

    《jQuery实战(第三版)》(Bear Bibeault)【摘要

    2017-02-17 13:00

网友点评