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

2021-07-11 17:26:03 +08:00
 happyCodings
大佬们 你们前端的正则校验都是怎么封装的呀 或者用了哪些插件
自己找了两个 感觉体验并不是很美好
谢谢大家伙
3643 次点击
所在节点    Vue.js
19 条回复
tonytonychopper
2021-07-11 17:43:50 +08:00
没有很理解你的意思,正则一般不都是自己手撸吗?
QingStone
2021-07-11 17:50:13 +08:00
没有很理解你的意思,正则一般不都是自己手撸吗?
xy90321
2021-07-11 18:12:17 +08:00
你是要用正则去做表单项目校验,还是要去校验正则对不对?
cszchen
2021-07-11 18:27:24 +08:00
正则不都是自己写吗,常用的 email 手机号,随便搜到了
wohccdaa
2021-07-11 19:31:27 +08:00
没有很理解你的意思,正则一般不都是自己手撸吗?
mingl0280
2021-07-11 20:04:36 +08:00
正则自己写啊,常用的倒是都搜得到。
regex101.com 自己试
creanme
2021-07-11 22:13:57 +08:00
不太明白封装是啥意思,我前期不会写正则一般是搜索别人写好的正则,然后测试一下。
这里有个比较多收集的正则
https://any86.github.io/any-rule/
正则可视化
https://regexper.com/
LouisGuo
2021-07-12 08:48:12 +08:00
磕出响了吗?不响不算的啊
skys215
2021-07-12 09:10:19 +08:00
还有个 regexr-cn.com 拿来验证正则也不错,是 regexr.com 的中文版
vincentxue
2021-07-12 13:14:43 +08:00
正则就一字符串,何来封装。直接说出你的需求,大家帮你写。你可能是想找一个正则生成器?
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
2021-07-12 19:14:54 +08:00
我猜你是想做 await this.$refs.form.validate() 这种效果的封装?一次写成就可以套到所有项目
7075
2021-07-13 11:05:51 +08:00
正则还要封装? js 原生已经支持很好了,只需要建立(搜索抄袭)对应的正则规则字符串,用就完了。
xingyuc
2021-07-13 14:13:20 +08:00
这难道是个抖 m
RexG
2021-07-13 14:45:02 +08:00
没有很理解你的意思,正则一般不都是自己手撸吗?
常用: https://any86.github.io/any-rule/
可视化: https://regexper.com/
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
2021-07-15 09:00:38 +08:00
@en20 正解 已经弄好了 全部放到 vue 自定义指令里 谢谢
happyCodings
2021-07-15 09:03:30 +08:00
应该是我没有描述清晰-想做的是想要用一些方法 把所有正则封装到一起,然后需要使用的时候所有项目都可以直接调用
已经做好了,用 vue 自定义指令,yyds
fumichael
2021-08-05 18:06:00 +08:00
搜一下 async-validate

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/788856

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX