正則得介紹和使用——表單驗證
阿新 • • 發佈: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>