前端一般为了防止用户误输入，或者为了使用户获取最快的反馈，常常在表单设置正则验证，下面就让我介绍几个常用的正则验证。大家也可以在demo里实际操作一下。
demo地址：点击打开
html：
<div class="inp_box"><h3>请输入整数(1):</h3><input type="text" placeholder="请输入" oninput="ele_match1(event)"/></div>
<div class="inp_box"><h3>请输入数字(1):</h3><input type="text" placeholder="请输入" oninput="ele_match2(event)"/></div>
<div class="inp_box"><h3>请输入整数(2)(推荐):</h3><input type="text" placeholder="请输入" oninput="ele_match3(event)"/></div>
<div class="inp_box"><h3>请输入数字(2)(推荐):</h3><input type="text" placeholder="请输入" oninput="ele_match4(event)"/></div>
<div class="inp_box"><h3>2位小数(1)(推荐):</h3><input type="text" placeholder="两位小数四舍五入" oninput="ele_match5(event)"/></div>
<div class="inp_box"><h3>2位小数(2)(推荐):</h3><input type="text" placeholder="两位小数强制保留" oninput="ele_match6(event)"/></div>
<div class="inp_box"><h3>11位手机号码:</h3><input type="text" placeholder="11位手机号码" oninput="ele_match7(event)"/></div>
<div class="inp_box"><h3>验证邮箱:</h3><input type="text" placeholder="输入邮箱" oninput="ele_match8(event)"/><span id="text8"></span></div>
<div class="inp_box"><h3>身份证</h3><input type="text" placeholder="输入身份证" oninput="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="输入用户名" oninput="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="输入用户名" oninput="ele_match11(event)"/><span id="text11"></span></div>
<div class="inp_box"><h3 style="line-height:0.75rem;">隐藏特殊文字(如:北京,天安门)</h3><input type="text" placeholder="输入用户名" oninput="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;
}以上就是全部内容，仅代表作者个人观点，用以学习交流。