前端的表单内容校验，有哪几种处理办法？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2144 days ago, the information mentioned may be changed or developed.

本人后端，不太懂前端的东西，但是近期在维护一个项目，需要修改表单验证。只问思路，代码怎么写我自己解决。
需要校验的项有 [文本长度、必须为数字、不能填字符、邮箱格式、手机号格式、身份证格式] 等几种格式校验，目前的表单是只做了提示，但是在提交的时候没有校验，也就是说，填错了也能提交成功......
我看一般的互联网网站做的注册校验是错误提示，并且有错误项时提交按钮不能点，这是怎么做的
因为是个老项目，改后端逻辑是不现实的，所以要么在每一项都验证正确性，不正确不让填；要么在提交那一步做校验。
两种分别怎么处理，求指教，最好能有改动小一点的方案。

校验

表单

格式

提交

21 replies • 2020-07-24 18:08:51 +08:00

ztmqg

Jul 23, 2020 via Android

都要啊

Hurriance

Jul 23, 2020

不知道你前端项目是用什么写的，我之前用 Vue+antd 写表单的时候，按照你的需求可以写一个正则表达式来校验，关于校验的时机也是可以配置成改动时、失去焦点时、点提交时的。

Hurriance

Jul 23, 2020

补充一下，后端也需要做校验。

suzic

Jul 23, 2020 via Android

看下 validate.js ，很多前端组件库的表单模块都用的这个做检验

iixy

Jul 23, 2020

@Hurriance
是.net 的，汗。都是正则校验，但是这个校验只写了提示，现在的校验应该是引入了 txt 脚本实现的，我看脚本里用 js 代码写的正则表达式然后提示。
首先，后端校验排除掉，改不了。然后，如果提交时校验怎么写（提交时任何一项不合格都需要有提示）；然后如果是仅仅是失去焦点时校验，是不是也只能提示，无法强制用户修改

iixy

Jul 23, 2020

@suzic 改.net 老项目可以引入吗，如果问题不大的话我好好看看

ChanKc

Jul 23, 2020 via Android

改动量最小的应该是用 html 属性做校验，缺点是提示信息不友好，兼容性不好
不考虑兼容性的话可以在上述基础上监听 input 的 invalid 事件，根据 validity 的类型可以在错误信息显示的位置显示“太长”，“格式错误”类似的信息

faceRollingKB

Jul 23, 2020

基本思路是没个输入组件下方都可以显示错误信息，输入内容发生变化时触发验证，验证不通过(invalid 状态)要显示错误信息，并且任一输入项验证不通过都会使提交按钮处于 disabled 状态，最后当所有输入项都变成 valid 状态时提交按钮可以点击，然后接口要再验证一遍；
通常来说框架会帮你处理其中一部分逻辑，不同框架只是实现多少的区别，你自己要在框架基础上完成其他部分；
前端验证本质上是为了提升用户体验，后端验证是为了数据安全，所以前端验证可以不用太严格，看产品的取舍。

iixy

Jul 23, 2020

另外，这个项目对数字的验证方法是非数字 replace()成空感觉好蠢而且不适用于其他几种验证