这是一个创建于 2102 天前的主题，其中的信息可能已经有所发展或是发生改变。
- 纯 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 取一个就行，所以整体是通过了的。
12 条回复 • 2019-03-04 14:17:14 +08:00
 |
1
GM 2019-02-26 21:37:19 +08:00
精神上支持一下。
但是，个人觉得纯 Javascript、无任何依赖不算什么优势，只能是劣势，因为现在几乎没有项目只使用原生 JS 的。 |
 |
4
ayase252 2019-02-26 22:33:55 +08:00  1
不是，你这没单元测试不敢用啊
|
 |
6
meszyouh 2019-02-27 08:15:54 +08:00 via Android
没有自定义和异步检验么
|
 |
7
lqzhgood 2019-02-27 09:21:59 +08:00 1
OR: take one or more args, return false if all args are true ???
所有条件为 true 返回 false ? 难道不是只要有一个 true 就返回 true ? |
 |
11
azh7138m 2019-02-28 18:11:15 +08:00 via Android
rule 做成对象是不是好点，op 放第一个看着难受，而且目前来看对象解构性能也更好；再次输入密码这种要怎么校验；和楼上一样，这个校验功能只能同步，基本只有个 reg 可以用，有点 emmmmm
|
Select Language