正則得介紹和使用——表單驗證
阿新 • • 發佈：2019-09-14
1、正則的概念
（1）js這門語言一開始誕生得目的是什麼？
就是為了做表單驗證。在JS未出現以前，表單的資訊驗證需要傳輸給後臺，讓後臺做資料驗證處理之後，再返回給前端頁面處理的結果。在頻寬有限的情況下，整個驗證過程非常複雜，且耗時。 在使用JS做驗證的過程中，一個簡單的驗證規則的實現非常的麻煩。 如：從雜亂的字串中找數字 var str = "asd68asd687as6da78sd123123zcacas"
var linshi='';
var arr=[]
for(var i = 0 ; i < str .length ; i ++){
if(str.charAt(i)>=0&&str.charAt(i)<=9){
linshi+=str.charAt(i)
}else{
if(linshi!=''){
arr.push(linshi)
}
}
}
if(linshi!=''){
arr.push(linshi)
}
console.log(arr)如果我們使用正則呢？
var arr = str.match(/\d+/g);
是的使用正則和使用傳統的js程式碼都可以實現這個功能，但是是不是太繁瑣了。
（2）、什麼是正則？
正則表示式（regular expression）是一個描述字元規則的物件。可以用來檢查一個字串是否含有某個字元，將匹配的字元做替換或者從某個字串中取出某個條件的子串等。 正則表示式： 正則表示式其實就是一種規則，其實把正則稱作規則表示式更為恰當。正則的語法基於一種古老的perl語言。（3）、為什麼要使用正則呢？
前端往往有大量的表單資料校驗工作，採用正則表示式會使得資料校驗的工作量大大減輕。常用效果：郵箱，手機號，身份證號等（使用熟練的情況下）
正則的使用理念：
任何程式都可以不用正則表示式寫出來，但根據懶人原則，怎麼做不言而喻。 2.正則的建立方式 正則的建立方式： （1）.建構函式方式 var reg1 = new RegExp("a");
var str = "adassdfsd";
console.log(str.match(reg1)) //輸出匹配a的字元（2）.字面量方式，古老的perl語言風格
var reg2 = /a/;
console.log(str2.match(reg2)); //輸出匹配a的字元
（3）常用的正則表示式
/*
/ / 是正則表示式的識別符號
" " 是字串的識別符號
[ ] 是陣列的識別符號
{ } 是物件的識別符號
正則中的修飾符，寫在正則表示式後面／的後面：
g表示全域性匹配，查詢所有
i表示忽略大小寫
\d 匹配所有的數字
*/
var reg = /\d/g;
console.log(str.match(reg)) //列印字串中所有的數字
/* + 若干，量詞，表示多少個都可以，至少1個，無上限*/
var reg = /\d+/g;
console.log(str.match(reg)) //列印字串中所有的數字,連續
/* | 表示或，類似於js中的 || */
var reg = /abc|bbc|cbc|dbc/g
console.log(str.match(reg)); //列印字串中的abc，bbc，cbc，dbc
var reg = /[a-c]bc/g
/* [ ] 中元符*/
var reg = /[a-z]/ //匹配所有字母
[0-9] == \d
/* ^ 排除（除了）*/
var reg = /[^0-9]/ //表示除了數字之外所有
/* . 代表所有，不建議使用*/
var reg = /<.+>/g
console.log(str.replace(reg,"")) //過濾，表示尖括號裡面的東西不要，但是？
// 正則的貪婪定律：
var reg = /<[^<>]+>/g
console.log(str.replace(reg,"")) //表示尖括號裡面的東西不要，真
/*
轉義字元：
\d —— [0-9] 數字
\w —— [a-z0-9_] 數字，字母，下劃線
\s —— 空白字元（空格）
\D —— [^0-9] 非數字
\W —— [^a-z0-9_] 非數字，字母，下劃線
\S —— 非空白字元
量詞：限定符，可以指定正則表示式的一個給定組，必須要出現多少次才能滿足匹配
* 匹配前面的子表示式零次或多次
+ 匹配前面的子表示式至少一次或多次
? 匹配前面的子表達是零次或一次
{n} 匹配確定n次
{n,} 至少匹配n次
{n,m} 至少匹配n次，最多匹配m次
注：在限定符後緊跟？，則由貪婪匹配變成非貪婪匹配
*/
http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
tip：推薦的一個正則表示式手冊
3.字串.replace(oldstr, newstr)函式 和 字串.match(正則)函式
字串的replace函式的功能：將老字串替換成新字串
可以利用此函式，將老字串表示成正則表示式，對字串進行替換
如：字串中的abc替換成“哈哈”，如果正則後面沒有g，則只替換一個，如果沒有i，則大寫不會替換
var str = “abc123abc456abbcdABCefaacbcdbcabc";
var reg = /abc/g;
console.log(str.replace(reg,"哈哈"));
tip：字串match函式的功能：提取所有的想要的東西，返回一個數組，包含所有符合條件的字元。
tip：看一些小練習
// qq號驗證規則:
var reg = /[1-9]\d{4,10}/
//固化的規則：0411-6666888
//規則：開頭為0或者2的或者三位數字加上-開頭為非零的八位數字，結尾是1到4的分機號
var reg = /(0\d{2,3}-)?[1-9]\d{7}(-\d{1,4})?/
//複雜郵箱的規則：英文數字下劃線@一串英文或數子.一串英文
var reg = /\w+@[a-z0-9]+\.[a-z]+/i
//想要校驗怎麼辦？在正則轉義字元前加上\
//刪除多餘空格
str.replace(/\s+/g,'');
//刪除首尾空格
str.replace(/^\s+/,'');
str.replace(/\s+$/,'');
//檢查郵政編碼 共 6 位數字，第一位不能為 0
/^[1-9]\d{5}$/
//ps：規則可以自己定，也可以別人定，我們自己寫的練習當然是我們自己定，但是以後定規則一定要跟你產品經理溝通好，不是你想怎麼定就怎麼定。
4、正則的方法
正則.test(字串)方法，返回值是true和false 正則.test(字串)有一個特性，就是隻要字串的一部分符合要求，那麼就會返回true 解決方法： 在正則的一開始加上^表示開始 在正則的結尾處加上$表示結束 tip:exec()找到了返回陣列，找不到反回null 5、我們常用的檢測方式//（1）.中文檢測
//unicode編碼中文監測：
/^[\u2E80-\u9FFF]+$/
//（2）.使用者名稱檢測
/^[a-z0-9_-]{3,16}$/
//（3）郵箱檢測
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
// 可以多次出現 (字母數字下劃線.-)@可以出現多個(數字字母.-).2到6位字母或.
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
// 可以有多個(字母數字)可有多個可無(.多個(字母數字))@可以多個(數字字母可 有1次可無(-數字字母))可以有多個(1或2個.多個字母)
//示例：[email protected]
//（4）URL檢測
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
// 有1次或0次(http有1次或0次s : //) 可以多個(數字字母.-) . 2到6位(字母.) 可多個或0個 (可以多個或0個 /數字字母下劃線.-) 可0或1次/
// 示例 ：http://sh.op-ta.l.baidu.com
//（5）HTML標籤檢測
/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
// <多個(字母)可多個或0個(除了<的所有字元) />
// <多個(字母)可多個或0個(除了<的所有字元)>多個任意字元 </重複第一部分的多個字母>
//（6）自定義的html標籤
/<[^<>]+>/g
6、表單及ajax綜合驗證-案例
規則： （1）.使用者名稱 使用者名稱僅支援中文、字母、數字、“-”“_”的組合，4-20個字元 （2）.密碼的規則 數字字母特殊字元，一種型別，弱。兩種型別為中，三種類型為強 （3）.重複密碼 跟第一次輸入 密碼一致 （4）.手機號的驗證 第一位必須為1，後面再加10位數字 （5）.郵箱 數字大小寫字母_- 3到12位 @ 數字字母 2到9位 . 字母2到5位 （6）.提交按鈕的時候，判斷所有輸入資料是否符合。符合跳轉，否，不跳tip：寫的很簡陋的一個表單驗證，最後沒有用php、mysql做後臺資料的查詢，因為本地伺服器也看不了。
//css樣式
<style>
.error{color: red;}
.success{color: green;border: 2px solid green;}
</style>
//html樣式
<body>
<form action="http://www.jd.com">
<h2>註冊</h2>
<p>賬號:<input type="text" id="user"><span class="error"></span></p>
<p>密碼:<input type="text" id="pass"><span class="error"></span></p>
<p>確認密碼:<input type="text" id="validatePass"><span class="error"></span></p>
<p>手機號:<input type="text" id="phoneNum"><span class="error"></span></p>
<p>郵箱:<input type="text" id="email"> <span class="error"></span></p>
<input type="submit" id="btn" value="提交註冊資訊">
</form>
</body>
//js樣式
<script>
// 每次輸入框失去焦點的時候驗證輸入框內容; => 正確 給予正確提示，錯誤給予提示;
// 當點選提交按鈕的時候，所有輸入項要正確驗證才可跳轉; 陣列 裡面所有的項都驗證成功;
var aValidate = [false,false,false];//驗證陣列;
function $(id){
return document.getElementById(id);
}
var oBtn = $("btn");
var oUser = $("user");
var oPass = $("pass");
var oValidatePass = $("validatePass");
oUser.onblur = function(){
var sUser = oUser.value;
var reg = /^[a-z0-9_\-\u4e00-\u9fa5]{4,20}$/gi
//console.log(sUser);
if(reg.test(sUser)){
//符合規則;
oUser.className = "success";
oUser.nextElementSibling.innerHTML = "";
aValidate[0] = true;
}else{
//console.log(oUser.nextElementSibling);
oUser.className = "error";
oUser.nextElementSibling.innerHTML = "支援中文、字母、數字、“-”“_”的組合，4-20個字元";
aValidate[0] = false;
}
}
//判定密碼難度
oPass.onblur = function(){
var sPass = oPass.value;
var reg = /^[^\\*\u4e00-\u9fa5]{6,20}$/
if(reg.test(sPass)){
//驗證成功;
// 驗證密碼強度;
// 三個判斷分別加分 =>
//1.有數字 加一分;
//2.有字母 加一分;
//3.有特殊符號加一分;
var mark = 0;
//判定是否有數字;
var hasNum = /\d/g
if(hasNum.test(sPass)){
mark++;
}
var hasLetter = /[a-z]/gi
if(hasLetter.test(sPass)){
mark++;
}
var hasSymbol = /[!@#\$%\^\.]/g
if(hasSymbol.test(sPass)){
mark++;
}
switch(mark){
case 1:
oPass.style.border = "2px solid #f10";
oPass.nextElementSibling.innerHTML = "密碼安全度低,建議使用組合密碼!";
break;
case 2:
oPass.style.border = "2px solid yellow";
oPass.nextElementSibling.innerHTML = "密碼中等,建議使用組合密碼!";
break;
case 3:
oPass.style.border = "2px solid green";
oPass.nextElementSibling.innerHTML = "你別把自己密碼忘了!";
setTimeout(function(){
oPass.nextElementSibling.innerHTML = "";
}, 1000);
}
oPass.className = "";
aValidate[1] = true;
}else{
oPass.className = "error";
oPass.style.border = "1px solid #000";
oPass.nextElementSibling.innerHTML = "請輸入符合規則的密碼";
aValidate[1] = false;
}
}
oValidatePass.onblur = function(){
if(oValidatePass.value == oPass.value){
//正確
oValidatePass.style.border = "1px solid #ddd";
oPass.style.border = "1px solid #ddd";
oValidatePass.nextElementSibling.innerHTML=""
aValidate[2] = true;
}else{
//錯誤;
oValidatePass.style.border = "2px solid red";
oValidatePass.nextElementSibling.innerHTML="密碼輸入不一致";
oPass.style.border = "2px solid red";
aValidate[2] = false;
}
}
oBtn.onclick = function(event){
// 是否必填選項選中;
var isAllValidate = false; //是否全部驗證通過;
for(var i = 0 ; i < aValidate.length ; i++){
if(aValidate[i] == false){
var evt = event || window.event;
if(evt.preventDefault){
evt.preventDefault()
}else{
window.event.returnValue = false;
}
break;
}
}
}
</script>