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

一个纯 Javascript 的表单验证组件

  •  
  •   lyric · 2019-02-26 21:31:21 +08:00 · 2181 次点击
    这是一个创建于 1014 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 纯 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 protected]+$/, '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
    GM
        1
    GM  
       2019-02-26 21:37:19 +08:00
    精神上支持一下。

    但是,个人觉得纯 Javascript、无任何依赖不算什么优势,只能是劣势,因为现在几乎没有项目只使用原生 JS 的。
    lyric
        2
    lyric  
    OP
       2019-02-26 22:20:47 +08:00 via iPhone   ❤️ 1
    @GM 没有依赖意味着可以加到任何类型的项目中都不受限。
    Mac
        3
    Mac  
       2019-02-26 22:32:01 +08:00 via Android
    @GM 对于那些不满足各种框架功能的要求,原生比在框架上搭省略了学习成本啊。
    ayase252
        4
    ayase252  
       2019-02-26 22:33:55 +08:00   ❤️ 1
    不是,你这没单元测试不敢用啊
    lyric
        5
    lyric  
    OP
       2019-02-26 22:40:02 +08:00
    @ayase252 有道理,等我得闲补一下。
    meszyouh
        6
    meszyouh  
       2019-02-27 08:15:54 +08:00 via Android
    没有自定义和异步检验么
    lqzhgood
        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 ?
    lyric
        8
    lyric  
    OP
       2019-02-27 10:23:11 +08:00
    @lqzhgood 写错了,应该 "if any of them is true."
    lyric
        9
    lyric  
    OP
       2019-02-27 20:17:02 +08:00
    @ayase252 补好了~帮我补全点儿呗
    azh7138m
        10
    azh7138m  
       2019-02-28 18:03:38 +08:00 via Android
    @livid 我发现夜间模式看代码是看不到的,至少在手机端看不到
    azh7138m
        11
    azh7138m  
       2019-02-28 18:11:15 +08:00 via Android
    rule 做成对象是不是好点,op 放第一个看着难受,而且目前来看对象解构性能也更好;再次输入密码这种要怎么校验;和楼上一样,这个校验功能只能同步,基本只有个 reg 可以用,有点 emmmmm
    lyric
        12
    lyric  
    OP
       2019-03-04 14:17:14 +08:00
    @azh7138m Array 可以少敲几个字符啊。
    再次输入密码这种我打算可以传入一个 validateFn 函数来处理。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2382 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 15:15 · PVG 23:15 · LAX 07:15 · JFK 10:15
    ♥ Do have faith in what you're doing.