表单验证插件——validator.js

大家好，欢迎来到IT知识分享网。

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(''); 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(''); 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){ // 判断是否错误 } })