• Stars
    star
    284
  • Rank 142,090 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个简单、轻量级,但功能强大的 Validator 组件

validator.js

一个简单、轻量级,但功能强大的 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

线上运行版本

使用方法

一、实例化

$('#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').validator(); // or
$('#form_id').validator(options);

validator 方式支持一个 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},
 }

三、HTML 标记

目前 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 这个对象中。

1. 一般标记

在 html 标记上,一个需要验证的表单项,需要加上 required 属性,或者 options.identifie 中指定的选择器名。如:

<input type="email" required />
<select required>
  <option>...
</select>
<div contenteditable pattern="^\d+$"></div>

2. Checkbox & Radio

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>

3. 异步支持

当需要异步验证时,在表单添加一个 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>

4. 二选一

支持二选一,比如联系方式,座机和手机可以只填一项。HTML 的标记如下,在需要此功能的项添加 data-aorb 属性,指定 a 或者 b,顺序可以相反:

<input data-aorb="a" >
<input data-aorb="b" >

NOTE: 顺便说一句,实现多选一代码可以更简单一点,但问题在于这是个好设计吗?所以多想一下。

5. 支持自定义元素的事件

可以在 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 + '")');
})

6. 支持在指定元素添加错误 class

可以在 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

贡献者

More Repositories

1

pen

enjoy live editing (+markdown)
JavaScript
4,788
star
2

typo.css

中文网页重设与排版:一致化浏览器排版效果,构建最适合中文阅读的网页排版
HTML
4,477
star
3

wechat.js

微信相关的 js 操作:分享、网络、菜单
JavaScript
920
star
4

express-guide

对英文版 ExpressJS 的一个翻译
363
star
5

han

a module for tanslating Chinese(汉字) into /\w+/ or pinyin
JavaScript
200
star
6

essage

a more elegant way to show message
JavaScript
187
star
7

learn-js

老婆想学 js 这件事就是一个政治任务
142
star
8

everyday

从今天开始,要么写代码要么写文档
JavaScript
133
star
9

sofi.sh

program of http://sofi.sh
118
star
10

restcookbook

REST 小书
HTML
84
star
11

weather

weather app for iOS device
CSS
84
star
12

weather-api

提供一个从 weather.com.cn 上根据城市接口取天气信息的方法
JavaScript
56
star
13

node-api-docs

解读 node.js api 文档
54
star
14

stacktrace.js

record js stack trace
JavaScript
52
star
15

imageXSS.js

防止外部链接通过图片进行 XSS 攻击
JavaScript
46
star
16

performance.js

calculate performance timing for web page
JavaScript
46
star
17

proportion.js

meet the best proportion of the device.
HTML
41
star
18

hire

理论上是长期的,不定时更新
29
star
19

recorder.js

Using HTML5 to capture photo / video via the camera of your device
JavaScript
29
star
20

writedown

Stop thinking, start creating.
JavaScript
28
star
21

A-Poem-A-Day

给儿子念诗,每天一首
27
star
22

storage.js

a jQuery plugin that make text storage works with all mayor browsers (include IE6+)
19
star
23

sofish

13
star
24

mongoimport

import JSON to mongo collection
JavaScript
11
star
25

resize.js

use canvas to resize image
JavaScript
10
star
26

log2json

transform nginx log to json
JavaScript
9
star
27

goyd

自用有道翻译 CLI 小工具
Go
6
star
28

mask.js

create an opacity mask to a(all) specific element(s)
JavaScript
3
star
29

nodebb-plugin-qiniu-file

save images/files to qiniu.com
JavaScript
2
star
30

bx_suggest

百姓网搜索自动完成 workflow.
PHP
2
star
31

hasFlashPlayer.js

a snippet to detect whether a FlashPlayer is installed in browser.
JavaScript
1
star
32

log2mongo

automatic log to mongodb
JavaScript
1
star
33

donuts

hybrid sucks
JavaScript
1
star