未分類
20 7 月 2020

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

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

資深大佬 : gransh 6

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

  • 資深大佬 : ztmqg

    都要啊

  • 資深大佬 : Hurriance

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

  • 資深大佬 : Hurriance

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

  • 資深大佬 : suzic

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

  • 主 資深大佬 : gransh

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

  • 主 資深大佬 : gransh

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

  • 資深大佬 : ChanKc

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

  • 資深大佬 : faceRollingKB

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

  • 主 資深大佬 : gransh

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

  • 資深大佬 : marcong95

    提交的话，如果是异步请求，你找到发送请求那里，加入判断逻辑就好了。

    要是同步请求的话，你需要往表单的 onsubmit 事件里加入判断，校验不通过返回 false 就不会提交了

  • 主 資深大佬 : gransh

    @faceRollingKB 目前的情况是，如果后端能改，前端这个就不用写了，然而不能~哭
    你的这个逻辑应该就是互联网公司通用的做法，感觉并不容易，但是好像也只有这样最合理

  • 資深大佬 : faceRollingKB

    @gransh 尽量别这么玩，兼容性很不友好，让产品改成用户自主修改，页面提示错误信息

  • 資深大佬 : anUglyDog

    你最好最简单的改法就是 form 监听 submit 事件，对每一项进行校验，不通过就拦截，不提交。

  • 主 資深大佬 : gransh

    @faceRollingKB 现在就是这样的， 第三方测试不通过，非得说互联网产品是提交时每一项都有提示的。实际上产品是单位用户自己用的，根本不会出现那种跟错误提示对着干的情况。

  • 資深大佬 : AmosAlbert

    格式的话可以前端 js+正则校验

  • 資深大佬 : ccraohng

    大概率是 jQuery，都有成熟的库的

  • 資深大佬 : Doracis

    尽量别自己手写，能引入框架最好，jquery 能搜到的就很多了，如果能引入 element 会更方便，el-form 完全符合你的预期
    https://element.eleme.cn/#/zh-CN/component/form

  • 資深大佬 : abelmakihara

    前端框架用的校验都差不多 这两种情况都要有~
    单个的就正则 复杂的需要额外的校验函数
    最后提交的时候再校验一次
    当然写完整是比较麻烦
    如果只是后台项目自己用只在提交校验就可以了

  • 資深大佬 : ares586

    前端有很多现成的 UI 库，可以方便使用。
    简单页面 JQuery+bootstrap+bootstrapValidator 就可以，复杂一点的单页面应用，可以用 vue + elementUI 。
    如果是少量输入框手写正则，百度搜就可以~

  • 資深大佬 : cnuser002

    这事听起来不难啊。
    你既然已经能判断每个项的对错了，用一个变量控制提交按钮的有效性不就结了吗。

  • 資深大佬 : dengji85

    已经有验证提示直接 jq 判断有错误提示就不能提交