表单验证插件——validator.js（表单验证的代码怎么写）

https://wangchujiang.com/validator.js/

validator.js

轻量级的JavaScript表单验证, 字符串验证。没有依赖, 支持UMD，~3kb。

作为模块使用

在应用中引用 validator.min.js 文件

$ npm install validator.tool --save

在 .js 文件中调用

// 字符串验证
var validator = require('validator.tool');
var v = new validator();
v.isEmail('wowohoo@qq.com');
v.isIp('192.168.23.3');
v.isFax('');
// 表单验证
var a = new validator('example_form',[
{...}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})

客户端使用

在应用中引用 validator.min.js 文件

<script type="text/javascript" src="dist/validator.min.js"></script>

在JS中使用方法。

<script type="text/javascript">
var v = new Validator();
v.isEmail('wowohoo@qq.com');
v.isIp('192.168.23.3');
</script>

应用在表单中的方法。

<form id="example_form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
</form>
<script type="text/javascript">
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_emil|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
//name 字段
name: 'sex',
display:"请你选择性别{{sex}}",
// 验证条件
rules: 'required'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
</script>

应用在表单中的方法。

new Validator(formName, option, callback)

formName

参数formName 是标签中 <form> 中的 id 或者 name 的值，如上面的 example_form

option

各种参数说明。

`name` //-> input 中 `name` 对应的值
`display` //-> 验证错误要提示的文字 `{{这个中间是name对应的值}}`
`rules` //-> 一个或多个规则(中间用`|`间隔)
- `is_emil` //-> 验证合法邮箱
- `is_ip` //-> 验证合法 ip 地址
- `is_fax` //-> 验证传真
- `is_tel` //-> 验证座机
- `is_phone` //-> 验证手机
- `is_url` //-> 验证URL
- `required` //-> 是否为必填
- `max_length` //-> 最大字符长度
- `min_length` //-> 最小字符长度

以数组的方式将下面参数传入方法中。

{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_emil|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
}

自定义正则

自定义正则，以regexp_开始

{
//name 字段
name: 'sex',
// 对应下面验证提示信息
display:"请你选择性别{{sex}}|请输入数字",
//自定义正则`regexp_num`
regexp_num:/^[0-9]+$/,
// 验证条件，包括应用自定义正则`regexp_num`
rules: 'required|regexp_num'
}
callback
var validator = new Validator('example_form',[
{...},{...}
],function(obj,evt){
//obj = {
// callback:(error, evt, handles)
// errors:Array[2]
// fields:Object
// form:form#example_form
// handles:Object
// isCallback:true
// isEmail:(field)
// isFax:(field)
// isIp:(field)
// isPhone:(field)
// isTel:(field)
// isUrl:(field)
// maxLength:(field, length)
// minLength:(field, length)
// required:(field)
//}
if(obj.errors.length>0){
// 判断是否错误
}
})