V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
TonyChol
V2EX  ›  React

关于前端表单验证的最佳实践

  •  
  •   TonyChol · 2018-09-04 14:21:21 +08:00 · 2442 次点击
    这是一个创建于 2256 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Hello 大家好~

    相传我们组接收了其他组的一份前端项目,比较老旧( ES5 + 低版本 React,里头甚至还有 React Mixin ……),我现在开始在其基础上开发新功能(苦不堪言😢)。

    其中最令我头疼的是表单的验证,表单当中有各种 field,每个 field 都要么对应单个字符串,要么对应字符串的数组或者 dict - 里面的验证逻辑那是错综复杂。

    我现在在想办法出一个解决方案重写当中复杂的验证逻辑。现在初步的想法是:

    表单中的每一个 component 都负责其自己对应的验证逻辑————即每一个 component 暴露一个getErrorMessages。但这不能百分之百解决问题:一些文本框的验证逻辑还取决于其他的输入的行为,比如用户输入国家的时候其他的验证逻辑就被改变了…

    敢问各位有什么关于前端表单验证最佳实践嘛?如果大家有比较好的博客文章欢迎推荐。

    谢谢大家!

    1 条回复    2018-09-04 14:24:19 +08:00
    TonyChol
        1
    TonyChol  
    OP
       2018-09-04 14:24:19 +08:00
    抱歉搜了一下,v2 其实有类似的讨论: https://www.v2ex.com/t/466537

    里头的链接不错: https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5148 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 05:45 · PVG 13:45 · LAX 21:45 · JFK 00:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.