一些常用的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, ' ');
以上就是全部内容，仅代表作者个人观点，用以学习交流。
