首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

一个纯 Javascript 的表单验证组件

  •  
  •   lyric · 52 天前 · 1279 次点击
    这是一个创建于 52 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 纯 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": "123@abc.com"
        },
        "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   52 天前
    精神上支持一下。

    但是,个人觉得纯 Javascript、无任何依赖不算什么优势,只能是劣势,因为现在几乎没有项目只使用原生 JS 的。
        2
    lyric   52 天前 via iPhone   ♥ 1
    @GM 没有依赖意味着可以加到任何类型的项目中都不受限。
        3
    Mac   52 天前 via Android
    @GM 对于那些不满足各种框架功能的要求,原生比在框架上搭省略了学习成本啊。
        4
    ayase252   52 天前   ♥ 1
    不是,你这没单元测试不敢用啊
        5
    lyric   52 天前
    @ayase252 有道理,等我得闲补一下。
        6
    meszyouh   52 天前 via Android
    没有自定义和异步检验么
        7
    lqzhgood   52 天前   ♥ 1
    OR: take one or more args, return false if all args are true ???
    所有条件为 true 返回 false ?
    难道不是只要有一个 true 就返回 true ?
        8
    lyric   52 天前
    @lqzhgood 写错了,应该 "if any of them is true."
        9
    lyric   51 天前
    @ayase252 补好了~帮我补全点儿呗
        10
    azh7138m   50 天前 via Android
    @livid 我发现夜间模式看代码是看不到的,至少在手机端看不到
        11
    azh7138m   50 天前 via Android
    rule 做成对象是不是好点,op 放第一个看着难受,而且目前来看对象解构性能也更好;再次输入密码这种要怎么校验;和楼上一样,这个校验功能只能同步,基本只有个 reg 可以用,有点 emmmmm
        12
    lyric   47 天前
    @azh7138m Array 可以少敲几个字符啊。
    再次输入密码这种我打算可以传入一个 validateFn 函数来处理。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2410 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 07:05 · PVG 15:05 · LAX 00:05 · JFK 03:05
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1