V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
gransh
V2EX  ›  JavaScript

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

  •  
  •   gransh · 2020-07-23 20:14:25 +08:00 · 2813 次点击
    这是一个创建于 1569 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本人后端,不太懂前端的东西,但是近期在维护一个项目,需要修改表单验证。只问思路,代码怎么写我自己解决。
    需要校验的项有 [文本长度、必须为数字、不能填字符、邮箱格式、手机号格式、身份证格式] 等几种格式校验,目前的表单是只做了提示,但是在提交的时候没有校验,也就是说,填错了也能提交成功......
    我看一般的互联网网站做的注册校验是错误提示,并且有错误项时提交按钮不能点,这是怎么做的
    因为是个老项目,改后端逻辑是不现实的,所以要么在每一项都验证正确性,不正确不让填;要么在提交那一步做校验。
    两种分别怎么处理,求指教,最好能有改动小一点的方案。
    21 条回复    2020-07-24 18:08:51 +08:00
    ztmqg
        1
    ztmqg  
       2020-07-23 20:20:02 +08:00 via Android
    都要啊
    Hurriance
        2
    Hurriance  
       2020-07-23 20:22:23 +08:00
    不知道你前端项目是用什么写的,我之前用 Vue+antd 写表单的时候,按照你的需求可以写一个正则表达式来校验,关于校验的时机也是可以配置成改动时、失去焦点时、点提交时的。
    Hurriance
        3
    Hurriance  
       2020-07-23 20:23:12 +08:00
    补充一下,后端也需要做校验。
    suzic
        4
    suzic  
       2020-07-23 20:27:28 +08:00 via Android
    看下 validate.js ,很多前端组件库的表单模块都用的这个做检验
    gransh
        5
    gransh  
    OP
       2020-07-23 20:32:23 +08:00
    @Hurriance
    是.net 的,汗。都是正则校验,但是这个校验只写了提示,现在的校验应该是引入了 txt 脚本实现的,我看脚本里用 js 代码写的正则表达式然后提示。
    首先,后端校验排除掉,改不了。然后,如果提交时校验怎么写(提交时任何一项不合格都需要有提示);然后如果是仅仅是失去焦点时校验,是不是也只能提示,无法强制用户修改
    gransh
        6
    gransh  
    OP
       2020-07-23 20:33:14 +08:00
    @suzic 改.net 老项目可以引入吗,如果问题不大的话我好好看看
    ChanKc
        7
    ChanKc  
       2020-07-23 20:33:37 +08:00 via Android
    改动量最小的应该是用 html 属性做校验,缺点是提示信息不友好,兼容性不好
    不考虑兼容性的话可以在上述基础上监听 input 的 invalid 事件,根据 validity 的类型可以在错误信息显示的位置显示“太长”,“格式错误”类似的信息
    faceRollingKB
        8
    faceRollingKB  
       2020-07-23 20:34:55 +08:00
    基本思路是没个输入组件下方都可以显示错误信息,输入内容发生变化时触发验证,验证不通过(invalid 状态)要显示错误信息,并且任一输入项验证不通过都会使提交按钮处于 disabled 状态,最后当所有输入项都变成 valid 状态时提交按钮可以点击,然后接口要再验证一遍;
    通常来说框架会帮你处理其中一部分逻辑,不同框架只是实现多少的区别,你自己要在框架基础上完成其他部分;
    前端验证本质上是为了提升用户体验,后端验证是为了数据安全,所以前端验证可以不用太严格,看产品的取舍。
    gransh
        9
    gransh  
    OP
       2020-07-23 20:35:05 +08:00
    另外,这个项目对数字的验证方法是 非数字 replace()成空 感觉好蠢 而且不适用于其他几种验证
    marcong95
        10
    marcong95  
       2020-07-23 20:35:10 +08:00
    提交的话,如果是异步请求,你找到发送请求那里,加入判断逻辑就好了。

    要是同步请求的话,你需要往表单的 onsubmit 事件里加入判断,校验不通过返回 false 就不会提交了
    gransh
        11
    gransh  
    OP
       2020-07-23 20:56:53 +08:00
    @faceRollingKB 目前的情况是,如果后端能改,前端这个就不用写了,然而不能~哭
    你的这个逻辑应该就是互联网公司通用的做法,感觉并不容易,但是好像也只有这样最合理
    faceRollingKB
        12
    faceRollingKB  
       2020-07-23 20:58:00 +08:00
    @gransh 尽量别这么玩,兼容性很不友好,让产品改成用户自主修改,页面提示错误信息
    anUglyDog
        13
    anUglyDog  
       2020-07-23 21:00:45 +08:00
    你最好最简单的改法就是 form 监听 submit 事件,对每一项进行校验,不通过就拦截,不提交。
    gransh
        14
    gransh  
    OP
       2020-07-23 21:18:06 +08:00
    @faceRollingKB 现在就是这样的, 第三方测试不通过,非得说互联网产品是提交时每一项都有提示的。实际上产品是单位用户自己用的,根本不会出现那种跟错误提示对着干的情况。
    AmosAlbert
        15
    AmosAlbert  
       2020-07-24 07:46:45 +08:00
    格式的话可以前端 js+正则校验
    ccraohng
        16
    ccraohng  
       2020-07-24 08:46:14 +08:00 via Android
    大概率是 jQuery,都有成熟的库的
    Doracis
        17
    Doracis  
       2020-07-24 09:28:06 +08:00
    尽量别自己手写,能引入框架最好,jquery 能搜到的就很多了,如果能引入 element 会更方便,el-form 完全符合你的预期
    https://element.eleme.cn/#/zh-CN/component/form
    abelmakihara
        18
    abelmakihara  
       2020-07-24 09:56:21 +08:00
    前端框架用的校验都差不多 这两种情况都要有~
    单个的就正则 复杂的需要额外的校验函数
    最后提交的时候再校验一次
    当然写完整是比较麻烦
    如果只是后台项目自己用只在提交校验就可以了
    ares586
        19
    ares586  
       2020-07-24 10:30:21 +08:00
    前端有很多现成的 UI 库,可以方便使用。
    简单页面 JQuery+bootstrap+bootstrapValidator 就可以,复杂一点的单页面应用,可以用 vue + elementUI 。
    如果是少量输入框手写正则,百度搜就可以~
    cnuser002
        20
    cnuser002  
       2020-07-24 11:05:01 +08:00
    这事听起来不难啊。
    你既然已经能判断每个项的对错了,用一个变量控制提交按钮的有效性不就结了吗。
    dengji85
        21
    dengji85  
       2020-07-24 18:08:51 +08:00
    已经有验证提示直接 jq 判断有错误提示就不能提交
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   956 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 20:49 · PVG 04:49 · LAX 12:49 · JFK 15:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.