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

2018-09-04 14:21:21 +08:00
 TonyChol

Hello 大家好~

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

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

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

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

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

谢谢大家!

2443 次点击
所在节点    React
1 条回复
TonyChol
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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/486006

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX