一个纯 Javascript 的表单验证组件

[lyric]

• 纯 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": "[e-mail]"
    },
    "phone": {
      "pass": false,
      "value": "11223344xx"
    },
    "password": {
      "pass": true,
      "value": "abcdefg"
    }
  },
  "message": "Pass."
}

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

[GM]

精神上支持一下。

但是，个人觉得纯 Javascript、无任何依赖不算什么优势，只能是劣势，因为现在几乎没有项目只使用原生 JS 的。

[lyric]

@GM 没有依赖意味着可以加到任何类型的项目中都不受限。

[Mac]

@GM 对于那些不满足各种框架功能的要求，原生比在框架上搭省略了学习成本啊。

[ayase252]

不是，你这没单元测试不敢用啊

[lyric]

@ayase252 有道理，等我得闲补一下。

[meszyouh]

没有自定义和异步检验么

[lqzhgood]

OR: take one or more args, return false if all args are true ???
所有条件为 true 返回 false ?
难道不是只要有一个 true 就返回 true ?

[lyric]

@lqzhgood 写错了，应该 "if any of them is true."

[lyric]

@ayase252 补好了～帮我补全点儿呗

[azh7138m]

@livid 我发现夜间模式看代码是看不到的，至少在手机端看不到

[azh7138m]

rule 做成对象是不是好点，op 放第一个看着难受，而且目前来看对象解构性能也更好；再次输入密码这种要怎么校验；和楼上一样，这个校验功能只能同步，基本只有个 reg 可以用，有点 emmmmm

[lyric]

@azh7138m Array 可以少敲几个字符啊。
再次输入密码这种我打算可以传入一个 validateFn 函数来处理。