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了解不多,有好的方法,欢迎批评指点。

时间: 2024-10-11 16:22:40

js正则表达式验证(化繁为简)的相关文章

js正则表达式:验证邮箱格式、密码复杂度、手机号码、QQ号码

直接上代码 Java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

js正则表达式验证

有时候会要验证自己写的正则表达式是否正确 所以写了这个小东西: demo:js正则表达式验证 html: 1 <h3>绿色表示匹配,红色表示不匹配</h3> 2 <label>请在下框填入正则表达式</label><br /> 3 4 <textarea id="regexp"></textarea><br /> 5 6 <label>请在下框填需要验证的式子</label

JS正则表达式验证各种数字类型

以下内容 Js代码 <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.

2019手机号码JS正则表达式验证实例代码

这篇文章主要介绍了2019手机号码JS正则表达式验证实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符

js正则表达式验证【引用网址】

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////**************************以下函数调用方式:     function check()     {         var bb = document.getElementById("txt_id&quo

JS正则表达式验证数字非常全

Js代码   <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.val

js正则表达式验证大全

/判断输入内容是否为空    function IsNull(){        var str = document.getElementById('str').value.trim();        if(str.length==0){            alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称!        }    }       //判断日期类型是否为YYYY-MM-DD格式的类型    function IsDate()

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

转载来源:http://www.cnblogs.com/hai-ping/articles/2997538.html#undefined 1 //判断输入内容是否为空 2 function IsNull(){ 3 var str = document.getElementById('str').value.trim(); 4 if(str.length==0){ 5 alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称! 6 } 7 } 8 9 //判

JS正则表达式验证数字(很全)

Js代码   1.<script type="text/javascript"> 2.     function validate(){ 3.       var reg = new RegExp("^[0-9]*$"); 4.       var obj = document.getElementById("name"); 5.    if(!reg.test(obj.value)){ 6.        alert("请