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

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

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

 function validate(o,regex,backInfo){
if(o.value != "" && !regex.test(o.value)){
alert(backInfo);
o.value="";
o.focus();
}
}

参数解释:

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正则表达式验证(化繁为简)的更多相关文章

  1. JS正则表达式验证账号、手机号、电话和邮箱

    JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...

  2. js正则表达式验证

    有时候会要验证自己写的正则表达式是否正确 所以写了这个小东西: demo:js正则表达式验证 html: <h3>绿色表示匹配,红色表示不匹配</h3> <label&g ...

  3. js正则表达式验证字符长度

    原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...

  4. js正则表达式验证端口范围(0-65535)

    javascript正则表达式验证IP地址的端口合法性 if (!(/^[1-9]\d*$/.test(port) && 1 <= 1 * port && 1 * ...

  5. js正则表达式验证大全

    /判断输入内容是否为空    function IsNull(){        var str = document.getElementById('str').value.trim();      ...

  6. js 正则表达式验证

    验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9 ...

  7. js正则表达式验证大全--转载

    转载来源:http://www.cnblogs.com/hai-ping/articles/2997538.html#undefined //判断输入内容是否为空 function IsNull(){ ...

  8. JS正则表达式验证数字

    <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0- ...

  9. JS --正则表达式验证、实战之邮箱模式

     JS验证格式:提高用户体验,验证文本. 需要防止程序员的代码结构更改攻击,因为web段的代码有可能会被更改,更改后JS有可能会验证不住那么,C#端在JS段通过验证的情况下,还需要进行二次验证 < ...

随机推荐

  1. iOS-ASIHTTPRequest框架学习

    本文转载至 http://www.cnblogs.com/A-Long-Way-Chris/p/3539679.html 前段时间在公司的产品中支持了够快网盘,用于云盘存储. 在这个过程中,学习到了很 ...

  2. Win7 sql2005附加数据库失败 错误5120

      错误信息如下: 标题: Microsoft SQL Server Management Studio Express------------------------------ 附加数据库 对于 ...

  3. css 变手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  4. Splay_Tree 模板(区间修改,旋转操作)

    1.旋转操作 #define MAXN 100100 bool Add[MAXN];//延迟标记 struct Splay_Tree { int cnt, rt;//cnt为节点数,rt == roo ...

  5. 【BZOJ2150】部落战争 最小流

    [BZOJ2150]部落战争 Description lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国的下部征战来获得更大的领土. A国是一个M*N的矩阵,其中某些地方是城镇, ...

  6. Instapaper 使用经验和技巧

    Instapaper 分类本质是文件夹整理,没有标签. 文件夹意味着一篇文章只能放在一个文件夹里,不像标签可以实现一篇文章多个标签的功能. 一.文件夹和Like功能 1.已有文件夹: Home:存放所 ...

  7. 64位matlab mex64位编译器解决方案

    安装libsvm的时候用到了mex -setup,有的会报 Could not find the 64-bit compiler. This may indicate that the "X ...

  8. ubuntu(已经配置了python2+opencv)简易配置python3的opencv:

    所达到的效果就是python2与python3都能使用opencv参考:http://blog.csdn.net/jiandanjinxin/article/details/71438780https ...

  9. 读取用户家目录下的配置文件到properties

    String conf = System.getProperty("user.home") + File.separator + "a.properties"; ...

  10. Python迭代器包itertools(转)

    原文:http://www.cnblogs.com/vamei/p/3174796.html 作者:Vamei 在循环对象和函数对象中,我们了解了循环器(iterator)的功能.循环器是对象的容器, ...