js正则表达式验证(化繁为简)

Posted bwlu---ed

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js正则表达式验证(化繁为简)相关的知识,希望对你有一定的参考价值。

以前用js写正则表达式验证,每一个文本框后面都要添加一个onblur函数,验证的信息少,也没体会到有多繁琐,这次项目中的页面比较多,页面中的信息也比较多,如果每个文本框都加一个验证函数的话,js验证代码将会很长,很繁琐。

既然是函数,就可以传参数,这样的话,只需要一个验证函数就可以完成所有的信息验证了。

1、首先新建一个js文件validate.js

1 function validate(o,regex,backInfo){
2     if(o.value != "" && !regex.test(o.value)){
3         alert(backInfo);
4         o.value="";
5         o.focus();
6     }    
7 }

参数解释:

o:文本框(标签)对象;

regex:是正则表达式;

backInfo:是输入不符合条件时返回的错误信息。

2、在页面中引入validate.js

在onblur函数中调用

<input type="text" id="userName" name="username"
    onblur="validate(this,regex=/正则表达式/,backInfo=‘错误信息‘)" placeholder="默认提示信息">

例:

<input type="text" id="userAmount" name="userAmount"
    onblur="validate(this,regex=/^\d+$/,backInfo=‘输入错误‘)" placeholder="请输入整数">

代码比之前简洁了许多,易于修改,只要在需要做验证的页面引入js并添加相应的函数即可,

现在只需要填入相应的正则表达式就可以了。

 

对js了解不多,有好的方法,欢迎批评指点。

 

以上是关于js正则表达式验证(化繁为简)的主要内容,如果未能解决你的问题,请参考以下文章

化繁为简的lombok

化繁为简——算法之魅力

化繁为简——算法之魅力

化繁为简——算法之魅力

化繁为简——算法之魅力

Paxos 化繁为简