一个纯 Javascript 的表单验证组件

• 纯 Javascript，没有任何依赖
• 可以用在浏览器或者 Node
• 支持复合规则（ AND, OR, RE 三个元语）
• 输出每个字段的检查结果

GitHub: https://github.com/lyricat/vanilla-form-validator

DEMO: https://lyricat.github.io/vanilla-form-validator/demo/

使用方法

假设我们有一个包含 4 个字段的注册表单，每个字段都有不同的要求：

• 姓名：必填，任何字符。
• email：格式为电子邮件。
• 电话：一个或多个数字
• 密码：字母数字，超过 5 个字符。

另外，需要一个来自电子邮件和电话领域：如果您填写电子邮件，电话是可选的，反之亦然。

根据上述规则，我们可以定义如下规则：

  var rule = [
    'AND',
    'name',
    ['OR',
      ['RE', /^.+@.+$/, 'email'],
      ['RE', /^[0-9]+$/, 'phone'],
    ],
    ['RE', /^[0-9a-zA-Z]{5}[0-9a-zA-Z]+$/, 'password'],
  ]

可以传入一个 form 元素（如果在浏览器环境）：

  function onSubmit(button, evt) {
    var form = document.getElementById('form')
    var ret = FormValidator.test(form, rule)
    console.log(ret)
  }

也可以传入一个字典：

  var ret = FormValidator.test(form, rule)
  console.log(ret)

会得到这样的输出

{
  "pass": true, // 校验通过没有
  "fields": {
    "name": {
      "pass": true,  // 这个字段校验通过没有
      "value": "abc" // 这个字段的内容
    },
    "email": {
      "pass": true,
      "value": "[email protected]"
    },
    "phone": {
      "pass": false,
      "value": "11223344xx"
    },
    "password": {
      "pass": true,
      "value": "abcdefg"
    }
  },
  "message": "Pass."
}

按照上文的输出，phone 字段没有校验通过，但是由于 email 和 phone 取一个就行，所以整体是通过了的。