表单验证

在前端许多逻辑中，我们都会出现到表单验证这一部分逻辑。

近日突然又用到 ThinkPHP 被其表单验证深深的迷住。

故倒腾出前端一套类似的做法

rules

验证字段,验证规则,错误提示,[验证条件,附加规则]

验证规则

require 字段必须、email 邮箱、url URL地址、number 数字

验证条件 （可选）

|值|触发条件| |---|----| |0|存在字段就验证（默认）| |1|必须验证| |2|值不为空的时候验证|

附加规则

|规则|说明| |----|----| |regex|正则验证，定义的验证规则是一个正则表达式（默认）| |function|函数验证，定义的验证规则是一个函数名| |confirm|验证表单中的两个字段是否相同，定义的验证规则是一个字段名| |equal|验证是否等于某个值，该值由前面的验证规则定义| |notequal|验证是否不等于某个值，该值由前面的验证规则定义| |in|验证是否在某个范围内，定义的验证规则可以是一个数组或者逗号分割的字符串| |notin|验证是否不在某个范围内，定义的验证规则可以是一个数组或者逗号分割的字符串（3.1.2版本新增）| |length|验证长度，定义的验证规则可以是一个数字（表示固定长度）或者数字范围（例如3,12 表示长度从3到12的范围）|

import validateForm from 'validate-form-p'
// 定义 rules 规则


const rules = [
  ['email', 'email', 'email必须填写', 1],
  ['email', 'email', 'email必须是email格式', 1],
  ['contact', 'url', 'contact必填', 1],
  ['isNumber', 'number', '必须是数字', 1],
  ['reuqireButIs2', 'require', 'contact必填', 2],
  ['password', 'repassword', '两次密码不一致', 1, 'confirm'],
  ['reg', '', '正则测试不一致', 1, /aava/],
  ['in', [1,2,4,5,6], '不在第二个数据范围中', 1, 'in'],
  ['notIn', [1,2,4,5,6], '在第二个数据范围中', 1, 'notIn'],
  ['phone', 'require', '手机号码必须是存在', 1],
  ['phone', '11', '手机号码必须是11位', 1, 'length'], // 如果上面的条件不满足 这里的错误条件不会促发
  ['equal', 11, '结果不相等', 1, 'equal'],
  ['equal', 11, '结果相等', 1, 'notEqual'],
]

// 设置需要验证的数据
// 然后进行验证 返回 true or false
const result = validateForm.setData(formData).validate(rules)
// 如果返回为 true 即可直接提交表单
console.log(result)
// 如果返回 false 即可通过 getError() 得到错误信息
console.log(validateForm.getError())

具体可以看下 examples 下的 index.js 如何使用

Usage

import validateForm from 'validate-form-p'
const rules = [
  ['name', 'require', 'name 必须输入', 1]
]