smart-validate
简单快捷的数据建模及数据验证工具,可以配合redux-form、formik等完成快速表单验证
开始
npm install --save smart-validate
基础使用
//配合redux-form;;; const syncValidate = userphone: rule: 'phone' errorTip: '手机号格式有误' nullTip: '手机号不能为空' userpwd: nullTip: '密码不能为空' ;@ { if syncValidatevalid //... 提交 else console; //... 错误处理 }; { const handleSubmit = thisprops; return <form> <label> <span>用户名:</span> <Field component="input" type="tel" name="userphone" placeholder="请输入手机号" maxLength=11 /> </label> <label> <span>密码:</span> <Field component="input" type="password" name="userpwd" placeholder="请输入密码" /> </label> <button onClick=>登录</button> </form> ; }
API
const syncValidate = new Validate (scheme)
接收验证计划并创建验证,返回一个实例对象
参数 scheme
scheme
为一个key:value
组合的对象,key
为需要验证的字段名,value
包含以下 4 种属性:
rule
: 字段值的验证规则errorTip
: 自定义的错误提示 默认值为请填写正确信息
nullTip
: 自定义的为空提示 默认值为数据不能为空
required
: 是否为必填项 默认值为true
当required
为false
时,验证方法将会在此项字段的值不为空的情况下才会去验证,为空将会忽略验证
示例:
const validator = username: rule:'email' errorTip:'用户名格式必须为邮箱' nullTip:'请输入用户名' password: nullTip:'请输入密码' ;const error = ;console; // 返回结果如下// { username: '用户名格式必须为邮箱',password: '请输入密码'}
更多示例请参考:test/index.test.js
rule
rule
为对应字段需要验证的规则,可以包含以下几种类型:
类型 | 描述 |
---|---|
String | String 值为默认规则集或是在 rules 里面传入的自定义规则集的 key 值(参照 默认规则) |
RegExp | 将会根据传入的正则表达式去验证对应的字段值 |
Function | 自定义的方法将被传入 3 个参数:(value,values,key) ,value 为当前验证的字段值,values 为所有字段的键值对,key 为当前验证字段的 key 值。会根据验证方法的返回值去判断此验证是否通过,当返回值仅为true 时,验证通过,其它类型,验证失败。当返回值的类型为string 时将被用作为错误提示 |
Array | 接收一组验证规则,数组中的每一项可以是以上 3 种类型之一。内部验证方法将会依次调用数组当中每一项的验证规则,当且仅当前一项验证规则通过时,才会去验证后续规则。 |
只要是在scheme定义过的字段,默认内部验证方法都会去验证字段的值是否
=== undefined
,当且仅当字段的值不等于undefined
时,内部验证方法才会去验证对应在scheme中定义的规则。
示例:
const syncValidate = username: rule:'email' errorTip:'用户名格式必须为邮箱' nullTip:'请输入用户名' age: rule:/^{1,2}$/ errorTip:'年龄有误' required:false password: { if length >= 6 && length <= 20 return true; return '密码长度必须大于等于6,小于等于20'; } nullTip:'请输入密码' repassword: { if value === values'password' return true; return '两次密码不一致'; } nullTip:'请输入确认密码' bio: rule:'string' { if length <= 20 return true; return false; } errorTip:'请输入20个字符以内的字符串' required:false //...;
Validate.ruleType
为了方便快速创建验证,默认内置了部分验证规则、错误提示和为空提示。详见Validate.ruleType
规则 | 说明 |
---|---|
number | 数字类型包含正数、负数、整数、小数 |
电子邮箱格式 | |
url | 验证值是否为网址 |
name | 中文姓名格式,包含少数名族姓名中间的 · |
phone | 为1开头的手机号(注:号段变化太快这里仅校验是否为 1 开头的 11 位手机号) |
bank | 验证是否为银行卡号(注:仅校验位数) |
string | 不包含特殊字符 |
postcode | 邮箱格式 |
password | 验证密码长度为6-12位,由数字、小写字符和大写字母组成,但必须至少包括2种字符 |
idcard | 身份证号 |
Validate.addRule(ruleObj)
当默认内置规则不满足实际项目需要时,可以使用 Validate.addRule 进行扩展,参数ruleObj
为对应扩展的规则名和具体规则的键值对,无法覆盖内置的 Validate.ruleType
Instance API
实例对象包含以下属性和方法
scheme : Object
对象的验证计划,默认为创建对象时传入的 scheme 对象,可以修改,内部验证器每次验证将依据当下最新的 scheme 进行校验 详细参数参考
error : Object
错误对象,默认为{}
,当验证不通过时为对应的字段和错误提示组成的键值对,验证通过为{}
validator(values) : Object
验证器,接收待验证的对象 例如{ field1: 'value1', field2: 'value2' }
,并依据 scheme
进行校验,并返回校验的错误对象
valid : boolean
对验证结果的一次标志,true
为验证通过,false
为验证不通过,初始为false
。可依据此熟悉判断一次验证的结果
tip : string
验证提示,如果验证未通过,默认值为第一个字段的提示信息,便于移动端 Toast 验证交互方案
pristine : boolean
初始标志,为true
表示scheme
从未验证过,即从未调用validator
方法