1
ztmqg 2020-07-23 20:20:02 +08:00 via Android
都要啊
|
2
Hurriance 2020-07-23 20:22:23 +08:00
不知道你前端项目是用什么写的,我之前用 Vue+antd 写表单的时候,按照你的需求可以写一个正则表达式来校验,关于校验的时机也是可以配置成改动时、失去焦点时、点提交时的。
|
3
Hurriance 2020-07-23 20:23:12 +08:00
补充一下,后端也需要做校验。
|
4
suzic 2020-07-23 20:27:28 +08:00 via Android
看下 validate.js ,很多前端组件库的表单模块都用的这个做检验
|
5
gransh OP |
7
ChanKc 2020-07-23 20:33:37 +08:00 via Android
改动量最小的应该是用 html 属性做校验,缺点是提示信息不友好,兼容性不好
不考虑兼容性的话可以在上述基础上监听 input 的 invalid 事件,根据 validity 的类型可以在错误信息显示的位置显示“太长”,“格式错误”类似的信息 |
8
faceRollingKB 2020-07-23 20:34:55 +08:00
基本思路是没个输入组件下方都可以显示错误信息,输入内容发生变化时触发验证,验证不通过(invalid 状态)要显示错误信息,并且任一输入项验证不通过都会使提交按钮处于 disabled 状态,最后当所有输入项都变成 valid 状态时提交按钮可以点击,然后接口要再验证一遍;
通常来说框架会帮你处理其中一部分逻辑,不同框架只是实现多少的区别,你自己要在框架基础上完成其他部分; 前端验证本质上是为了提升用户体验,后端验证是为了数据安全,所以前端验证可以不用太严格,看产品的取舍。 |
9
gransh OP 另外,这个项目对数字的验证方法是 非数字 replace()成空 感觉好蠢 而且不适用于其他几种验证
|
10
marcong95 2020-07-23 20:35:10 +08:00
提交的话,如果是异步请求,你找到发送请求那里,加入判断逻辑就好了。
要是同步请求的话,你需要往表单的 onsubmit 事件里加入判断,校验不通过返回 false 就不会提交了 |
11
gransh OP @faceRollingKB 目前的情况是,如果后端能改,前端这个就不用写了,然而不能~哭
你的这个逻辑应该就是互联网公司通用的做法,感觉并不容易,但是好像也只有这样最合理 |
12
faceRollingKB 2020-07-23 20:58:00 +08:00
@gransh 尽量别这么玩,兼容性很不友好,让产品改成用户自主修改,页面提示错误信息
|
13
anUglyDog 2020-07-23 21:00:45 +08:00
你最好最简单的改法就是 form 监听 submit 事件,对每一项进行校验,不通过就拦截,不提交。
|
14
gransh OP @faceRollingKB 现在就是这样的, 第三方测试不通过,非得说互联网产品是提交时每一项都有提示的。实际上产品是单位用户自己用的,根本不会出现那种跟错误提示对着干的情况。
|
15
AmosAlbert 2020-07-24 07:46:45 +08:00
格式的话可以前端 js+正则校验
|
16
ccraohng 2020-07-24 08:46:14 +08:00 via Android
大概率是 jQuery,都有成熟的库的
|
17
Doracis 2020-07-24 09:28:06 +08:00
尽量别自己手写,能引入框架最好,jquery 能搜到的就很多了,如果能引入 element 会更方便,el-form 完全符合你的预期
https://element.eleme.cn/#/zh-CN/component/form |
18
abelmakihara 2020-07-24 09:56:21 +08:00
前端框架用的校验都差不多 这两种情况都要有~
单个的就正则 复杂的需要额外的校验函数 最后提交的时候再校验一次 当然写完整是比较麻烦 如果只是后台项目自己用只在提交校验就可以了 |
19
ares586 2020-07-24 10:30:21 +08:00
前端有很多现成的 UI 库,可以方便使用。
简单页面 JQuery+bootstrap+bootstrapValidator 就可以,复杂一点的单页面应用,可以用 vue + elementUI 。 如果是少量输入框手写正则,百度搜就可以~ |
20
cnuser002 2020-07-24 11:05:01 +08:00
这事听起来不难啊。
你既然已经能判断每个项的对错了,用一个变量控制提交按钮的有效性不就结了吗。 |
21
dengji85 2020-07-24 18:08:51 +08:00
已经有验证提示直接 jq 判断有错误提示就不能提交
|