## formVerification.js
### formVerification.js 是什么?
formVerification.js 是一个数据验证器,可用于前端表单数据的验证。
> 通过规则来控制验证逻辑,以后如果不同模块组合会有不同的验证规则(业务),那么直接动态生成相应的验证规则配置就可以了,通过配置来解耦验证逻辑,使得代码更易读和更易于维护。
*****
### formVerification.js 和 jquery-validation 的区别?
[jquery-validation](https://jqueryvalidation.org/) 是最优秀的开箱即用前端表单验证插件,没有之一; formVerification 是一个数据规则验证器,并不能直接用于表单,你可以使用它来封装一个强大的表单验证器,非常简单,只需要生成规则来校验就可以。
如果你需要快速的给已有表单加入验证规则,jquery-validation 将是最好的选择,但如果你需要做复杂的业务规则校验, formVerification.js 或能够帮到你。
*****
### php 版本?
对,php 也需要这样的验证器,「配置就是规则,规则就是业务」 ,这么好的东西,php 当然也需要。
没有特殊说明时,API 与 js 版是一致的。
php 版本找时间在整理出来...
*****
### 完整规则形式:
```javascript
fieldName: {
title: '变更后 联系人姓名',
special: '^',
selector: '[name^=sqrname], [name^=newsqrname]',
range: 0,
join: function (el) {
return $('[name=is-up-lianxi]:checked').val() == 1;
},
rule: [
{
exp: 'required',
msg: '必填'
}
],
form: 'myform',
},
```
验证器属性解释:
| 序号 | 属性名 | 值类型 | 说明 | 是否必要 | 默认值 | 使用说明 |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | fieldName | string | 要验证的字段名称 | 是 | | 如:lxname |
| 2 | title | string | 字段名称 | 是 | | 如:申请人。规则提示消息默认会拼接此值 |
| 3 | special | string | 辅助匹配 fieldName 属性的 | 否 | | 可用值:`^`, `$`, `~`, `*`, `!`;`special: '^'` => `[name^=lxname]` |
| 4 | selector | string | 选择器 | 否 | | 如果需要匹配的`inputEls` 太复杂,`special` 也难以胜任,就可以使用 `selector` 属性。优先级最高,无视 `fieldName`和`special`了 |
| 5 | range | int,array | 匹配的`inputEls` Range | 否 | | int分正数 和负数 两种情况:+int => int; -1 => \[1, ~\] |
| 6 | join | string,callback | 关联条件 | 否 | | 值类型为 string 时,表示全局函数名/对象名;只有满足关联条件时才需要对当前 `inputEl` 启用**本条验证规则**(粒度精细到可以控制字段的每一条验证规则);函数实参为 val 和当前 `inputEl` 和 当前验证规则 ,即:`(val, inputEl, rule)` ;函数返回值为布尔值,表示是否满足关联条件 |
| 7 | must | string,callback,bool | 字段是否必须存在 | 否 | true | 当 inputEls/inputEl 不存在时,默认为不通过验证,返回“字段不存在”提示,本属性可以控制字段不存在时的处理规则;值类型为 string 时,表示全局函数名/对象名;函数实参为 **当前选择器 selector** `(inputElSelector, inputElsSelector, eq)` ;函数返回值为布尔值,true: 字段必须存在,false: 可以允许字段不存在 |
| 8 | rule | array | 验证规则 | 否 | `[{ exp: 'required' }]` | 见:**规则属性解释** |
| 9 | form | string | 表单名称 | 否 | | 有该属性时,字段的 匹配 `inputEls` 会受其(父作用域)限定,它的优先级最高,比 `selector`属性 还高 |
*****
#### 规则属性解释:
> 规则属性 的 每条规则(如果有多个匹配的话) 对 每一个`inputEl匹配`(如果有多个匹配的话) 的值进行验证,只有全部验证通过才为 `通过验证` ,否则为 `不通过验证` ,当某个规则验证不通过时,验证器会立即返回验证提示并停止运行,不继续验证后续规则及其他字段了。
> 验证时,如果匹配 inputEl 不存在则报字段不存在,为不通过验证。(注意:must 属性会影响此)
| 序号 | 属性名 | 值类型 | 说明 | 是否必要 | 默认值 | 使用说明 |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | exp | string,callback | 规则表达式 | 是 | | 见:**exp属性说明** |
| 2 | msg | string,callback | 规则验证不通过提示 | 否 | exp=required 时,默认值为 “必填”,否则为 “不合法” | 值类型为 string 时,以`:`开头时表示全局函数名/对象名,否则为msg;为函数时,函数实参为 `(val, inputEl, rule)` ;函数返回值为字符串,即msg |
*****
#### exp属性说明
| 序号 | 表达式 | 值类型 | 表达式类型 | 说明 |
| --- | --- | --- | --- | --- |
| 1 | :string | string | 自定义函数,如:`:fun`,`:js.fun` | 以`:`开头时表示全局函数名/对象名,函数实参为 `(val, inputEl, rule)` ;函数返回值为布尔值时表示是否通过验证,返回字符串时 表示不通过验证,返回值为不合法提示 |
| 2 | callback | callback | 自定义回调 | 函数实参为 `(val, inputEl, rule)` ;函数返回值为布尔值时表示是否通过验证,返回字符串时 表示不通过验证,返回值为不合法提示 |
| 3 | `/^\d+$/ig` | object | 正则表达式模式 | 用户自定义正则表达式的模式 用户自定义正则表达式验证规则 |
| 4 | `'/^\\d+$/ig'` | string | 正则表达式字符串 | 用户自定义正则表达式验证规则,以 `/` 开头的表示正则,注意 `/\d/` 字符串形式需要写成 `'/\\d/'` |
| 3 | required | string | 内置规则 | 非空字符串检查,默认 `string: $.trim(v)` 后再判断 |
| 4 | email | string | 内置规则 | 检查是否为合法邮箱字符串 |
| 5 | mobile | string | 内置规则 | 检查是否为合法手机号码字符串 |
| 6 | url | string | 内置规则 | 检查是否为合法url字符串 |
| ... | | | | |
| \* | | | 相等规则 | **如果exp都不满足上述表达式规则,则表示为 相等规则**,如 `exp: 123` 时,`val === '123'` 才为通过验证。 |
*****
last update: 2019-12-28