jquery里正則的使用方法及經常使用的正則驗證

時間 2020-06-09

原文原文鏈接

　　本文是一篇關於jquery使用正則來驗證輸入，及一些經常使用驗證規則的基礎文章，適合新手。javascript

假設咱們的網頁裏有這樣的一個表單：css

<input id="aijquery" type="text"> 
<button id="btn">驗證</button>

1.驗證用戶輸入的只能是英文和數字：html

$("#btn").click(function(){ 
var $aijquery=$("#aijquery"); 
if(!/^[a-z0-9]+$/ig.test($aijquery.val())){
alert("只能數字和英文");
}
});

2.驗證用戶輸入只能爲數字，而且若是是小數的話，最多隻能是兩位小數：java

$("#btn").click(function(){ 
var v=$("#aijquery").val(); 
if(!/^\d+(?:\.\d{0,2})?$/.test(v).test(v)){
alert("只能爲數字，而且若是是小數的話，最多隻能是兩位小數");
}
});

3.驗證電子郵箱：jquery

$("#btn").click(function(){ 
var v=$("#aijquery").val(); 
if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(v).test(v)){
alert("請輸入正確的電子郵箱");
}
});

4.驗證漢字：bootstrap

$("#btn").click(function(){ 
var v=$("#aijquery").val(); 
if(!/^[\u4e00-\u9fa5]+$/.test(v).test(v)){
alert("請輸入漢字");
}
});

5.判斷是否爲整數，能夠爲0：ide

$("#btn").click(function(){ 
var v=$("#aijquery").val(); 
if(!/^0$|^[1-9]\d*$/.test(v).test(v)){
alert("請輸入整數");
}
});

下面是例子：ui

<!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>