本文是一篇關于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("請輸入整數");
}
});
下面是例子:

<!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>
View Code
出處:http://www.aijquery.cn