一个简单、轻量级,但功能强大的 Validator 组件,并且可以方便扩展类型判断:
- jQuery / Zepto 插件,即插即用 (若同时存在 jQuery 和 Zepto,将以插件执行时,优先作用于 jQuery) *
- 基于 HTML5 的 API 设计
- 兼容主流浏览器,包括 IE 6+
- jQuery (1.8.3、1.11.1)、Zepto (1.1.3) tested
DEMO form validator
- 一行搞定:iNews.io Register
- 进阶使用:百姓网发布表单
$('#form_id').validator(options);
validator
方法支持一个 options
对象作为参数。当不传参数时,options
具备默认值。参数储存在 $('').data('__options__')
。完整的对象如下描述:
options = {
// 需要校验的表单项,(默认是 `[required]`),支持任何 jQuery 选择器可以选择的标识
identifie: {String},
// 校验不通过时错误时添加的 class 名(默认是 `error`),当校验为空时,还同时拥有 `empty` 这个 classname
klass: {String},
// 错误出现时 `klass` 放在当前表单项还是父节点(默认是当前表单项)
isErrorOnParent: {Boolean},
// 触发表单项校验的方法,当是 false 在点 submit 按钮之前不校验(默认是 `blur`)
method: {String | false},
// 出错时的 callback,第一个参数是所有出错表单项集合
errorCallback(unvalidFields): {Function},
before: {Function}, // 表单检验之前
after: {Function}, // 表单校验之后,只有 __return true__ 才会提交表单
}
$('#form_id').validate(); // or
$('#form_id').validate(options);
validate
方式支持一个 options
对象作为参数,该参数只在调用时供__一次性__使用。当不传参数时,options
使用 validator
的参数作为默认值。完整的对象如下描述:
options = {
// 需要校验的表单项,(默认是 `[required]`),支持任何 jQuery 选择器可以选择的标识
identifie: {String},
// 校验不通过时错误时添加的 class 名(默认是 `error`),当校验为空时,还同时拥有 `empty` 这个 classname
klass: {String},
// 错误出现时 `klass` 放在当前表单项还是父节点(默认是当前表单项)
isErrorOnParent: {Boolean},
// 触发表单项校验的方法,当是 false 在点 submit 按钮之前不校验(默认是 `blur`)
method: {String | false},
// 出错时的 callback,第一个参数是所有出错表单项集合
errorCallback(unvalidFields): {Function},
}
目前 type 的类型支持 email/tel/url/range/number 等 HTML5 Form API 支持的类型,当 type 不存在,但为验证项时,则测试表单是否有空;当有标记 maxlength/minlength
的时候验证表单值的长度;当有 min/max 的时候和 type=range
一样验证当前值是否在 min/max 区间:min <= value <= max
。
同时,如果表单存在 pattern 属性,则不使用 type 作为验证,保持与 HTML5 API 一致,可以作为一种表单自定义验证的方式。比如下面这个表项,将不按 type="email" 来验证,而是使用 pattern 中的正则表达式来验证:
<input type="email" pattern="参照 HTML5 规范的正则表达式" />
注:type 的支持在 validator.js 中的 patterns 这个对象中。
在 html 标记上,一个需要验证的表单项,需要加上 required
属性,或者 options.identifie
中指定的选择器名。如:
<input type="email" required />
<select required>
<option>...
</select>
<div contenteditable pattern="^\d+$"></div>
input:checkbox
默认不校验,input:radio
根据 name 属性来区分组别,也即当所有 name='abc'
的 radio 有一个被 checked,那么表示这一组 radio 通过验证:
<label><input type="radio" required name="abc" value="A">[A]</label>
<label><input type="radio" required name="abc" value="B">[B]</label>
<label><input type="radio" required name="abc" value="C">[C]</label>
当需要异步验证时,在表单添加一个 data-url 的属性指定异步验证的 URL 那可,有几个可选的项:
data-url: 异步验证的 url
data-method: [可选] AJAX 请求的方法: get,post,getJSON 等,默认是 get
data-key: [可选] 发送当前表单值时用的 key,默认是 'key':$.get(url, {key: 表单的值})
html 标记如下:
<input type="text" data-url="https://api.github.com/legacy/user/search/china" data-method="getJSON" required>
支持二选一,比如联系方式,座机和手机可以只填一项。HTML 的标记如下,在需要此功能的项添加 data-aorb
属性,指定 a 或者 b,顺序可以相反:
<input data-aorb="a" >
<input data-aorb="b" >
NOTE: 顺便说一句,实现多选一代码可以更简单一点,但问题在于这是个好设计吗?所以多想一下。
可以在 html 中添加 data-event
以在单独的元素中触发自定义事件。假设我们设置一个 hello
事件,最终会触发在验证这个表单前触发 before.hello
事件,并且在验证完当前表单后触发一个 after.hello
事件。默认不触发任何事件:
<input id="event" type="text" data-event="hello" required>
可以使用标准的 jQuery on
来监听这个事件:
$('#event').on('before:hello', function(event, element){
alert('`before.hello` event trigger on $("#' + element.id + '")');
})
$('#event').on('after:hello', function(event, element){
alert('`after.hello` event trigger on $("#' + element.id + '")');
})
可以在 html 中添加 data-parent
用以指定需要添加错误 class 的元素,属性值为任意 jQuery 选择器支持的语法。例如一个表单被嵌套多层,可以通过在该表单上添加 data-parent='div[name="test"].parent'
来制定在距该表单最近的父级元素中 name="test"
并且 class="parent"
的 div
元素上添加错误 class。例:
<div name="test" class="parent">
<p>
<input type="test" data-parent="div[name="test"].parent" required>
</p>
</div>
- 以 2-spaces 作为缩进
- 变量先定义后赋值(除非赋值可以写成单行)
- 代码中出现以 $ 开头的对象,该为 jQuery 对象,比如 $item
使用 index.php 这个文件
基于 MIT 协议授权,你可以使用于任何地方(包括商业应用)、修改并重新发布。详见:LICENSE