V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
happyCodings
V2EX  ›  Vue.js

前端正则校验-小白给大家磕头了

  •  
  •   happyCodings · 2021-07-11 17:26:03 +08:00 · 3864 次点击
    这是一个创建于 1216 天前的主题,其中的信息可能已经有所发展或是发生改变。
    大佬们 你们前端的正则校验都是怎么封装的呀 或者用了哪些插件
    自己找了两个 感觉体验并不是很美好
    谢谢大家伙
    19 条回复    2021-08-05 18:06:00 +08:00
    tonytonychopper
        1
    tonytonychopper  
       2021-07-11 17:43:50 +08:00
    没有很理解你的意思,正则一般不都是自己手撸吗?
    QingStone
        2
    QingStone  
       2021-07-11 17:50:13 +08:00 via iPhone
    没有很理解你的意思,正则一般不都是自己手撸吗?
    xy90321
        3
    xy90321  
       2021-07-11 18:12:17 +08:00 via iPhone
    你是要用正则去做表单项目校验,还是要去校验正则对不对?
    cszchen
        4
    cszchen  
       2021-07-11 18:27:24 +08:00 via iPhone
    正则不都是自己写吗,常用的 email 手机号,随便搜到了
    wohccdaa
        5
    wohccdaa  
       2021-07-11 19:31:27 +08:00 via iPhone
    没有很理解你的意思,正则一般不都是自己手撸吗?
    mingl0280
        6
    mingl0280  
       2021-07-11 20:04:36 +08:00 via Android   ❤️ 1
    正则自己写啊,常用的倒是都搜得到。
    regex101.com 自己试
    creanme
        7
    creanme  
       2021-07-11 22:13:57 +08:00   ❤️ 2
    不太明白封装是啥意思,我前期不会写正则一般是搜索别人写好的正则,然后测试一下。
    这里有个比较多收集的正则
    https://any86.github.io/any-rule/
    正则可视化
    https://regexper.com/
    LouisGuo
        8
    LouisGuo  
       2021-07-12 08:48:12 +08:00
    磕出响了吗?不响不算的啊
    skys215
        9
    skys215  
       2021-07-12 09:10:19 +08:00
    还有个 regexr-cn.com 拿来验证正则也不错,是 regexr.com 的中文版
    vincentxue
        10
    vincentxue  
       2021-07-12 13:14:43 +08:00
    正则就一字符串,何来封装。直接说出你的需求,大家帮你写。你可能是想找一个正则生成器?
    wdssmq
        11
    wdssmq  
       2021-07-12 13:34:12 +08:00
    ajv-validator/ajv: The fastest JSON schema Validator. Supports JSON Schema draft-04/06/07/2019-09/2020-12 and JSON Type Definition (RFC8927)

    https://github.com/ajv-validator/ajv

    封装到是有个这个。。
    en20
        12
    en20  
       2021-07-12 19:14:54 +08:00
    我猜你是想做 await this.$refs.form.validate() 这种效果的封装?一次写成就可以套到所有项目
    7075
        13
    7075  
       2021-07-13 11:05:51 +08:00
    正则还要封装? js 原生已经支持很好了,只需要建立(搜索抄袭)对应的正则规则字符串,用就完了。
    xingyuc
        14
    xingyuc  
       2021-07-13 14:13:20 +08:00
    这难道是个抖 m
    RexG
        15
    RexG  
       2021-07-13 14:45:02 +08:00
    没有很理解你的意思,正则一般不都是自己手撸吗?
    常用: https://any86.github.io/any-rule/
    可视化: https://regexper.com/
    xuanzizhe
        16
    xuanzizhe  
       2021-07-14 15:28:21 +08:00
    如果是想判断正则表达式字面量是不是个合规的正则表达式,可以简单的验证一下:
    ```javascript
    const isRegExp = (rule) => {
    if(/^\/.+?\/[imdsguy]*$/.test(rule)){
    try{
    return new Function('', `var __rule__ = ${rule}; return __rule__ instanceof RegExp;`)();
    }catch(_e){
    return false;
    }
    }
    return false;
    };
    console.log(isRegExp('/a/b')); // false
    console.log(isRegExp('/a/i')); // true
    console.log(isRegExp('/a/ii')); // false
    console.log(isRegExp('/[a-z]/i')); // true
    console.log(isRegExp('/[z-a]/i')); // false
    ```
    正常的逻辑判断基本够用了,但上面的还是阻止不了一些特意规避的写法,比如像下面这样写:
    ```javascript
    console.log(isRegExp('/a/;/b/')); // true, 考虑到斜杠 /在字符 sets([/])里是不需要转义的,所以也不能简单的判断 /是否前面有反斜杠\
    ```
    要想完整的判断只能解析正则表达式的语法,但语法层面你还得考虑到浏览器对正则表达式的支持程度,比如是否要支持命名分组、\p unicode category 、负向前瞻等等,要做到完善还是需要考虑很多细节的。
    happyCodings
        17
    happyCodings  
    OP
       2021-07-15 09:00:38 +08:00
    @en20 正解 已经弄好了 全部放到 vue 自定义指令里 谢谢
    happyCodings
        18
    happyCodings  
    OP
       2021-07-15 09:03:30 +08:00
    应该是我没有描述清晰-想做的是想要用一些方法 把所有正则封装到一起,然后需要使用的时候所有项目都可以直接调用
    已经做好了,用 vue 自定义指令,yyds
    fumichael
        19
    fumichael  
       2021-08-05 18:06:00 +08:00
    搜一下 async-validate
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2835 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:20 · PVG 10:20 · LAX 18:20 · JFK 21:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.