安装使用
模块
在应用中引用 validator.min.js
文件
# npm 安装 $ npm install verification-puge --save# yarn 安装 $ yarn add verification-puge
在 .js
文件中调用
// 字符串验证var validator = ;var v = ;v;v;v; // 表单验证var a = 'example_form' ...{ ifobjerrors // 判断是否错误 }
客户端使用
在应用中引用 validator.js
文件, 手动下载并链接HTML中的 validator.js
在JS中使用方法。
说明文档
new Validator(formName, option, callback)
formName
formName
是标签中<form>
中的 id
或者 name
的值,如上面的example_form
option
-
name
-> input 中name
对应的值 -
display
-> 验证错误要提示的文字{{这个中间是name对应的值}}
-
rules
-> 一个或多个规则(中间用|
间隔)is_email
-> 验证合法邮箱is_ip
-> 验证合法 ip 地址is_fax
-> 验证传真is_tel
-> 验证座机is_phone
-> 验证手机is_url
-> 验证URLis_money
-> 金额格式验证is_english
-> 字母验证⚠️is_chinese
-> 中文验证is_percent
-> 验证百分比⚠️required
-> 是否为必填max_length
-> 最大字符长度min_length
-> 最小字符长度noSpecial
-> 判断是否没有特殊字符same(field)
-> 指定字段内容是否相同different(field)
-> 拒绝与某个字段相等,比如登录密码与交易密码情况contains(field)
-> 直接判断字符串是否相等accepted(field)
-> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
//name 字段 name: 'email' display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短" // 验证条件 rules: 'is_email|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 = 'example_form' ......{ //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) //} ifobjerrorslength>0 // 判断是否错误 }
特殊情况直接提交
var validator = 'example_form' ......{ //obj = { //} ifobjerrorslength>0 // 判断是否错误 }validatorform;
例子
字符串验证
var v = ;v; // -> 验证合法邮箱 |=> 返回布尔值v; // -> 验证合法 ip 地址 |=> 返回布尔值v; // -> 验证传真 |=> 返回布尔值v; // -> 验证手机 |=> 返回布尔值v; // -> 验证座机 |=> 返回布尔值v; // -> 验证URL |=> 返回布尔值vmaxLength'JSLite'12; // -> 最大长度 |=> 返回布尔值v; // -> 最小长度 |=> 返回布尔值v; // -> 是否为必填(是否为空) |=> 返回布尔值
表单中验证
点击按submit按钮验证
var validator = 'example_form' //name 字段 name: 'email' display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短" // 验证条件 rules: 'is_email|max_length(12)' // rules: 'valid_email|required|max_length(12)|min_length(2)' //name 字段 name: 'sex' display:"请你选择性别{{sex}}" // 验证条件 rules: 'required' { ifobjerrors // 判断是否错误 }
没有submit验证
var validator = 'example_form' //name 字段 name: 'email' display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短" // 验证条件 rules: 'is_email|max_length(12)' // rules: 'valid_email|required|max_length(12)|min_length(2)' //name 字段 name: 'sex' display:"请你选择性别{{sex}}|请输入数字" regexp_num:/^[0-9]+$/ // 验证条件 rules: 'required|regexp_num' { ifobjerrors // 判断是否错误 }validator
参考
借鉴这些优秀的库,撸出此玩意儿。
- chriso/validator.js一个字符串验证器和转换类型的库
- rickharrison/validate.js validate.js是一个轻量级的JavaScript表单验证库灵感来源CodeIgniter。