Validation.js by snandy

欢迎来到 Validation.js

你将看到 Validation.js 是如何运行的，以及让这一切起作用的程序代码，我用这些作为例子来显示它的功能，也可以作为你入门的向导。

提示：正如你知道的，仅依赖客户端校验的做法是很不明智的。应该始终在Server端也做适当的校验。这个JS库的目的，包括我们通常的JavaScript校验，并不能替代Server端的校验，只是让用户在填表单时减少一些挫折，帮他们节省时间。

使用

Validation.js有两个版本，独立版不依赖于任何库，页面中只需引入 validation.standalone.js。如果页面中使用了jQuery，那么就应该引入 validation.jquery.js

<script src="validation.standalone.js"></script>

或

<script src="validation.jquery.js"></script>

如果想让验证自动运行，只需给script添加 data-run="true"。页面onload后它会自动查找页面中具有data-validate属性的DOM元素，自行完成验证的初始化工作。不用写一行JS代码，仅仅只要配置好验证通过和未通过时的CSS样式。

<script src="validation.standalone.js" data-run="true"></script>

存在性校验

必填项：

只需两行代码

var obj1 = new Validation('#zv1')
obj1.add('presence')

正如你看到的，new的第一个参数是输入域的CSS Selector，也可以是DOM元素自身。

独立版仅支持四类选择器：ID、Class、Tag、Attribute，jQuery版则支持所有CSS选择器。

obj1.add方法的第一个参数是输入域需要采用的验证规则，这里的“presence”表示必填。此外还有 “numericality”(数字验证)、“size”(长度验证)等。后面会介绍。

亦可一行代码，Validation有个静态方法add可以很方便的添加一些基本验证，不需要复杂的设置

Validation.add('#zv1', 'presence')

不想使用默认提示语怎么办？

可直接在HTML里修改即可，给INPUT添加 data-succ-msg 或 data-error-msg

<input type="text" data-succ-msg="修改了正确提示语" data-error-msg="修改了错误提示语"/>

数字验证

数字：

Validation.add('#zv2', 'numericality')

整数：

var zv3Obj = new Validation('#zv3')
zv3Obj.add('numericality', {onlyInteger: true})

特定数字，比如 5：

var zv4Obj = new Validation('#zv4')
zv4Obj.add('numericality', {is: 5})

最小约束，比如只能输入 5 以上的数字：

var zv5Obj = new Validation('#zv5')
zv5Obj.add('numericality', {min: 5})

最大约束，比如只能输入 5 以下的数字：

var zv6Obj = new Validation('#zv6')
zv6Obj.add('numericality', {max: 5})

范围约束，比如只能输入 2-5 以内的数字：

var zv7Obj = new Validation('#zv7')
zv7Obj.add('numericality', {min: 2, max: 5})

组合约束，比如只能输入 2-5 以内的整数：

var zv8Obj = new Validation('#zv8')
zv8Obj.add('numericality', {min: 2, max: 5, onlyInteger: true})

长度校验

特定长度，比如只能输入4个字符：

var zv9Obj = new Validation('#zv9')
zv9Obj.add('size', {is: 4})

低限约束，比如至少要输入4个字符：

var zv10Obj = new Validation('#zv10')
zv10Obj.add('size', {min: 4})

高限约束，比如最多只能输入4个字符：

var zv11Obj = new Validation('#zv11')
zv11Obj.add('size', {max: 4})

范围约束，比如只能输入4-10个字符：

var zv12Obj = new Validation('#zv12')
zv12Obj.add('size', {min: 4, max: 10})

包含性校验

精确匹配，比如只能输入(apple, banana, orange)：

var zv13Obj = new Validation('#zv13')
zv13Obj.add('inclusion', {within: [ 'apple' , 'banana', 'orange' ]})

模糊匹配，还拿(apple, banana, orange)示例，这里只要包含指定的元素即可：

var zv14Obj = new Validation('#zv14')
zv14Obj.add('inclusion', {within: [ 'apple' , 'banana', 'orange' ], partialMatch: true})

排它性校验

精确匹配，不能输入(apple, banana, orange)：

var zv15Obj = new Validation('#zv15')
zv15Obj.add('exclusion', {within: [ 'apple' , 'banana', 'orange' ]})

模糊匹配，仍然用(apple, banana, orange)示例：

var zv16Obj = new Validation('#zv16')
zv16Obj.add('exclusion', {within: [ 'apple' , 'banana', 'orange' ], partialMatch: true})

格式校验

输入包含 “love” 的单词，不取分大小写：

var zv17Obj = new Validation('#zv17')
zv17Obj.add('format', { pattern: /love/i })

email校验

输入您的电子邮箱：

Validation.add('#zv18', 'email')

中文校验

请输入中文：

Validation.add('#zv19', 'chinese')

手机校验

请输入手机：

Validation.add('#zv24', 'mobile')

身份证号校验

身份证号：

Validation.add('#zv25', 'identity')

认可校验

请勾选：

Validation.add('#zv22', 'acceptance')

确认校验

登陆密码：

确认密码：

var zv23Obj = new Validation('#zv23')
zv23Obj.add('confirmation', {match: '#pwd'})

组合校验

请输入中文，且必填：

var zv20Obj = new Validation('#zv20')
zv20Obj.add('presence')
zv20Obj.add('chinese')

或者简写为一行，各个规则以空格间隔

zv20Obj.add('presence chinese')

请输入中文，长度为4-10，必填：

var zv21Obj = new Validation('#zv21')
zv21Obj.add('presence')
zv21Obj.add('chinese')
zv21Obj.add('size', {min: 4, max: 10})