🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 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