您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

elementui 表单使用正则做输入限制——深入了解JS正则

elementui 表单使用正则做输入限制——深入了解JS正则

最近项目上联调测试有个需求,要在表单中限制输入内容,比如编号中禁止特殊符号,只能纯数字或者字母,又比如单价中只能数字和小数点之类的这种正则验证一般网上都有现成的,我准备抄一个来用,然后就发现居然一个全一点的都没有。我寻思这玩意也不难,于是就准备自己来写了。

首先,项目前端是基于vue和elementui为基础。

其中输入框验证是 基于vue的rules,还有elementui的各种绑定参数,今天主要是说基于正则的表单验证

基本简单介绍一下项目中目前大致在使用的基础校验样式

<el-input v-model="output" 
    //将所有数字和.之外的字符 替换为''  g表示 替换所有的
    oninput="value=value.replace(/[^\d.]/g, '')"        
            ></el-input>

主要都是基于replace方法,所以这次主要不讲解方法,聚焦于正则。

先惯例找一份文档读起,把我需要的东西都了解。

另外提一个之前博文的小bug,项目里面遇到的,在js里 0 = ‘’ 所以如果结果是0 判断isnull的话是true

修饰符

i无视字母大小写
g匹配所有的
m匹配多行

方括号

方括号用于查找某个范围内的字符:

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符描述
.查找单个字符,除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

只是看,可以一晃就过去了,就像这些东西其实我老早就看到过,现在遇到了,还是不是要翻文档临时补课。

下面讲实际应用:

elementui中的实际应用

可以借助elementui 官方推荐的https://codepen.io/pen/做验证

//纯数字验证
<el-input 
    oninput="value=value.replace(/[^\d]/g, '')"        
            ></el-input>
//纯字母验证
<el-input 
    oninput="value=value.replace(/[^a-zA-Z]/g, '')"        
            ></el-input>
//纯字母数字
<el-input 
    oninput="value=value.replace(/[^a-zA-Z0-9]/g, '')"        
            ></el-input>
//除了数字 字母 汉字 
 <el-input v-model="output" 
    oninput="value=value.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, '')"        
            ></el-input>

写出来才发现,好像真的没什么,基本一招 [] [^]打遍天下无敌手了。。。。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进