一些常用的js正则表单验证

前端一般为了防止用户误输入，或者为了使用户获取最快的反馈，常常在表单设置正则验证，下面就让我介绍几个常用的正则验证。大家也可以在demo里实际操作一下。

demo地址：点击查看

html：

<div class="inp_box"><h3>请输入整数(1):</h3><input type="text" placeholder="请输入" οninput="ele_match1(event)"/></div>
<div class="inp_box"><h3>请输入数字(1):</h3><input type="text" placeholder="请输入" οninput="ele_match2(event)"/></div>
<div class="inp_box"><h3>请输入整数(2)(推荐):</h3><input type="text" placeholder="请输入" οninput="ele_match3(event)"/></div>
<div class="inp_box"><h3>请输入数字(2)(推荐):</h3><input type="text" placeholder="请输入" οninput="ele_match4(event)"/></div>
<div class="inp_box"><h3>2位小数(1)(推荐):</h3><input type="text" placeholder="两位小数四舍五入" οninput="ele_match5(event)"/></div>
<div class="inp_box"><h3>2位小数(2)(推荐):</h3><input type="text" placeholder="两位小数强制保留" οninput="ele_match6(event)"/></div>
<div class="inp_box"><h3>11位手机号码:</h3><input type="text" placeholder="11位手机号码" οninput="ele_match7(event)"/></div>
<div class="inp_box"><h3>验证邮箱:</h3><input type="text" placeholder="输入邮箱" οninput="ele_match8(event)"/><span id="text8"></span></div>
<div class="inp_box"><h3>身份证</h3><input type="text" placeholder="输入身份证" οninput="ele_match9(event)"/><span id="text9"></span></div>
<div class="inp_box"><h3 style="line-height:0.75rem;">用户名(4到16位字母,数字,下划线,减号)</h3><input type="text" placeholder="输入用户名" οninput="ele_match10(event)"/><span id="text10"></span></div>
<div class="inp_box"><h3 style="line-height:0.75rem;">日期(xxxx-xx-xx)</h3><input type="text" placeholder="输入用户名" οninput="ele_match11(event)"/><span id="text11"></span></div>
<div class="inp_box"><h3 style="line-height:0.75rem;">隐藏特殊文字(如:北京,天安门)</h3><input type="text" placeholder="输入用户名" οninput="ele_match12(event)" /></div>
<p class="op" id="text12"></p>

js:

//匹配数字(无法判断中文和小数点，即只能适用整数)
        function ele_match1(event){
            var data=event.target.value;
            //var inp_m=String(data);
            var re=/^\d+(\.\d+)?$/g;
            var str2=data.match(re);
            if(str2==null){//如果返回空
                data = data.substring(0, data.length - 1);
                event.target.value=data;
            }
        }
        
        
 
        //匹配数字(长按字母键不可控)
        function ele_match2(event){
            var val=event.target.value;
            var re = /^(\d+)\.{0,1}\d{0,}$/g;
            var str2=val.match(re);
            if(str2==null){//如果返回空
                val = val.substring(0, val.length - 1);
                event.target.value=val;
            }
        }
        
        //匹配整数字
        function ele_match3(event){
            var inp_m=String(event.target.value);
            var withdraw_money = parseFloat(inp_m);
            if(isNaN(withdraw_money) || withdraw_money== "undefined"){
                withdraw_money=0;
            }
            //withdraw_money=withdraw_money.toFixed(0);
            withdraw_money=parseFloat(withdraw_money);
            withdraw_money=parseInt(withdraw_money);
            event.target.value=withdraw_money;
            
        }
        
        
        //匹配所有数字，包括中文
        function ele_match4(event){
            var re = /^(\d+)\.{0,1}\d{0,2}$/g;
            var re2=/^(\d+)\.{0,1}$/g;
            var inp_m=String(event.target.value);
            if(inp_m.match(re)==null){
                var withdraw_money = parseFloat(inp_m);
                if(isNaN(withdraw_money) || withdraw_money== "undefined"){
                    withdraw_money=0;
                }
                withdraw_money=parseFloat(withdraw_money);
                event.target.value=withdraw_money;
            }else if(inp_m.match(re2)==null && inp_m.match(re)!=null){
                var withdraw_money=parseFloat(inp_m);
                event.target.value=withdraw_money;
            }
            
        }
        
        //2位小数四舍五入
        function ele_match5(event){
            var re = /^(\d+)\.{0,1}\d{0,2}$/g;
            var re2=/^(\d+)\.{0,1}$/g;
            var inp_m=String(event.target.value);
            if(inp_m.match(re)==null){
                var withdraw_money = parseFloat(inp_m);
                if(isNaN(withdraw_money) || withdraw_money== "undefined"){
                    withdraw_money=0;
                }
                withdraw_money=withdraw_money.toFixed(2);
                withdraw_money=parseFloat(withdraw_money);
                event.target.value=withdraw_money;
            }else if(inp_m.match(re2)==null && inp_m.match(re)!=null){
                var withdraw_money=parseFloat(inp_m);
                event.target.value=withdraw_money;
            }
        }
        
        //2位小数强制保留
        function ele_match6(event){
            var re = /^(\d+)\.{0,1}\d{0,2}$/g;
            var re2=/^(\d+)\.{0,1}$/g;
            var inp_m=String(event.target.value);
            if(inp_m.match(re)==null){
                var withdraw_money = parseFloat(inp_m);
                if(isNaN(withdraw_money) || withdraw_money== "undefined"){
                    withdraw_money=0;
                }
                withdraw_money=parseFloat(withdraw_money);
                withdraw_money=Math.floor(withdraw_money * 100) / 100;
                event.target.value=withdraw_money;
            }else if(inp_m.match(re2)==null && inp_m.match(re)!=null){
                var withdraw_money=parseFloat(inp_m);
                event.target.value=withdraw_money;
            }
        }
        
        //11位手机号码
        function ele_match7(event){
            var inp_m=String(event.target.value);
            var withdraw_money = parseFloat(inp_m);
            if(isNaN(withdraw_money) || withdraw_money== "undefined"){
                withdraw_money=0;
            }
            withdraw_money=parseFloat(withdraw_money);
            withdraw_money=parseInt(withdraw_money);
            if(String(withdraw_money).length>11){
                event.target.value=String(withdraw_money).substring(0,String(withdraw_money).length-1);
            }else{
                event.target.value=withdraw_money;
            }
        }
        
        //邮箱
        function ele_match8(event){
        　　var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
        　　var inp_m=String(event.target.value);
        　　if(!reg.test(inp_m)){ //正则验证不通过，格式不对
        　　　　document.getElementById('text8').innerHTML='格式不对';
        　　　　return false;
        　　}else{
        　　　　document.getElementById('text8').innerHTML='格式正确';
        　　　　return true;
        　　}
        }
        
        //身份证号合法性验证 
//支持15位和18位身份证号
//支持地址编码、出生日期、校验位验证
       function ele_match9(event){
               var code=String(event.target.value);
            var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
            var tip = "";
            var pass= true;
 
            if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
                tip = "身份证号格式错误";
                pass = false;
            }
 
            else if(!city[code.substr(0,2)]){
                tip = "地址编码错误";
                pass = false;
            }else{
                //18位身份证需要验证最后一位校验位
                if(code.length == 18){
                    code = code.split('');
                    //∑(ai×Wi)(mod 11)
                    //加权因子
                    var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
                    //校验位
                    var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
                    var sum = 0;
                    var ai = 0;
                    var wi = 0;
                    for (var i = 0; i < 17; i++)
                    {
                        ai = code[i];
                        wi = factor[i];
                        sum += ai * wi;
                    }
                    var last = parity[sum % 11];
                    if(parity[sum % 11] != code[17]){
                        tip = "校验位错误";
                        pass =false;
                    }
                }
            }
            if(!pass) {document.getElementById('text9').innerHTML=tip;}else{
                document.getElementById('text9').innerHTML='格式正确';
            }
       }
       
       //用户名验证(4到16位（字母，数字，下划线，减号）)
       function ele_match10(event){
        　    var reg= /^[a-zA-Z0-9_-]{4,16}$/;
        　　var inp_m=String(event.target.value);
        　　if(!reg.test(inp_m)){ //正则验证不通过，格式不对
        　　　　document.getElementById('text10').innerHTML='格式不对';
        　　　　return false;
        　　}else{
        　　　　document.getElementById('text10').innerHTML='格式正确';
        　　　　return true;
        　　}
        }
       
       //日期(xxxx-xx-xx)
       function ele_match11(event){
        　    var reg= /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
        　　var inp_m=String(event.target.value);
        　　if(!reg.test(inp_m)){ //正则验证不通过，格式不对
        　　　　document.getElementById('text11').innerHTML='格式不对';
        　　　　return false;
        　　}else{
        　　　　document.getElementById('text11').innerHTML='格式正确';
        　　　　return true;
        　　}
        }
       
       //匹配特定字符
       function ele_match12(event){
        　    var reg = /北京|天安门/g;
        　　var inp_m=String(event.target.value);
        　　var str2 = inp_m.replace(reg,'*');
            document.getElementById('text12').innerHTML=str2;
        }

如果想使用快速验证，则可以在行内写正则表达式

<div class="inp_box">
    <span>只允许中文，字数5个:</span>
    <input type="text" name="name" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'').substring(0,5)" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,'').substring(0,5))" >
</div>
 
<div class="inp_box">
      <span>只允许输入11位整数:</span>
      <input type="text" name="phone"  onkeyup="this.value=this.value.replace(/\D/g,'').substring(0,11)" onafterpaste="this.value=this.value.replace(/\D/g,'').substring(0,11)">
</div>
 
<div class="inp_box">
    <h3 style="line-height:0.75rem;">仅输入数字、字母、中文</h3>
    <input type="text" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" />
</div>
 
<div class="inp_box" id="number_inp" >
    <h3 style="line-height:0.75rem;">仅输入2位小数type=number模式</h3>
    <input  type="number" onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');(value.indexOf('.')< 0 && value !='')?value= parseFloat(value):''" />
</div>

在js中判断是否匹配

var pattern = /^[\u4E00-\u9FA5]{1,5}$/;
    if(!pattern.test($(this).val())){//用原生JS的test()函数来匹配传入的值，返回布尔值。
        //不匹配
    }

其它常用正则

1、去除字符串中文本换行改为html标签

str=strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');

以上就是全部内容，仅代表作者个人观点，用以学习交流。

来源：https://www.cnblogs.com/linfblog/p/12150955.html