jquery里正则的使用方法及常用的正则验证
本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手。
假设我们的网页里有这样的一个表单:
<input id="aijquery" type="text"> <button id="btn">验证</button>
1.验证用户输入的只能是英文和数字:
$("#btn").click(function(){ var $aijquery=$("#aijquery"); if(!/^[a-z0-9]+$/ig.test($aijquery.val())){ alert("只能数字和英文"); } });
2.验证用户输入只能为数字,并且如果是小数的话,最多只能是两位小数:
$("#btn").click(function(){ var v=$("#aijquery").val(); if(!/^\d+(?:\.\d{0,2})?$/.test(v).test(v)){ alert("只能为数字,并且如果是小数的话,最多只能是两位小数"); } });
3.验证电子邮箱:
$("#btn").click(function(){ var v=$("#aijquery").val(); if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(v).test(v)){ alert("请输入正确的电子邮箱"); } });
4.验证汉字:
$("#btn").click(function(){ var v=$("#aijquery").val(); if(!/^[\u4e00-\u9fa5]+$/.test(v).test(v)){ alert("请输入汉字"); } });
5.判断是否为整数,可以为0:
$("#btn").click(function(){ var v=$("#aijquery").val(); if(!/^0$|^[1-9]\d*$/.test(v).test(v)){ alert("请输入整数"); } });
下面是例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <title>jquery里常用正则的方法及演示-aijQuery.cn</title> <script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> <body> <DIV class="container-fluid"> <input id="aijquery" type="text"> <button id="btn">验证</button> </DIV> <script language="javascript"> $("#btn").click(function(){ var v=$("#aijquery").val(); //if(!/^[a-z0-9]+$/ig.test(v)){alert("只能数字和英文");} //if(!/^\d+(?:\.\d{0,2})?$/.test(v)){alert("只能为数字,如果有小数,最多只能两位!");} //if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(v)){alert("请输入正确的电子邮箱");} //if(!/^[\u4e00-\u9fa5]+$/.test(v)){alert("请输入汉字");} if(!/^0$|^[1-9]\d*$/.test(v)){alert("请输入整数");} }); </script> </body> </html>
出处:http://www.aijquery.cn