JS郵箱驗證-正則驗證

  1 <form action="">
  2 　　輸入：<input type="text" name="mazey" id="mazey" placeholder="請輸入郵箱">
  3 　　<input type="button" value="驗證" onclick="check();">
  4 </form>
  5 
  6 <script>
  7 function check(){
  8 　　var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正則表達式
  9 　　var obj = document.getElementById("mazey"); //要驗證的對象
 10 　　if(obj.value === ""){ //輸入不能爲空
 11 　　　　alert("輸入不能爲空!");
 12 　　　　return false;
 13 　　}else if(!reg.test(obj.value)){ //正則驗證不經過，格式不對
 14 　　　　alert("驗證不經過!");
 15 　　　　return false;
 16 　　}else{
 17 　　　　alert("經過！");
 18 　　　　return true;
 19 　　}
 20 }
 21 </script>
 22 
 23 1、RegExp
 24 
 25 1.1 建立RegExp對象
 26 
 27 new RegExp("必選,正則表達式","可選,匹配模式g,i,m")
 28 1.2 RegExp對象的方法
 29 
 30 test:檢索字符串中的指定值，返回True或False。
 31 exec:檢索字符串中的指定值，返回找到的值，沒有則null。
 32 complie:用於改變正則表達式，或增刪匹配模式。
 33 1.2.1 test()
 34 
 35 var r1 = new RegExp('world');
 36 console.log(r1.test('Hello, world!')); //true
 37 console.log(r1.test('Hello, World!')); //false
 38 var r2 = new RegExp('world', 'i'); //大小寫不敏感
 39 console.log(r2.test('Hello, World!')); //true
 40 var r3 = new RegExp(/world/i); //簡寫
 41 console.log(r3.test('Hello, World!')); //true
 42 1.2.2 exec()
 43 
 44 var r1 = new RegExp('world');
 45 console.log(r1.exec('Hello, world!')); //['world']
 46 console.log(r1.exec('Hello, World!')); //null
 47 var r2 = new RegExp('world', 'i'); //大小寫不敏感
 48 console.log(r2.exec('Hello, World!')); //['world']
 49 var r3 = new RegExp(/world/i); //簡寫
 50 console.log(r3.exec('Hello, World!')); //['world']
 51 var r4 = new RegExp('o');
 52 console.log(r4.exec('Hello, World!')); //['o']
 53 var r5 = new RegExp('o', 'gi');
 54 console.log(r5.exec('Hello, WOrld!')); //['o']
 55 console.log(r5.lastIndex); //5 匹配文本的第一個字符的位置，o爲4，下一個位置爲5
 56 console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一個o後調用繼續匹配
 57 console.log(r5.lastIndex); //9
 58 console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
 59 console.log(r5.lastIndex); //0 lastIndex重置爲0
 60 1.2.3 complie()
 61 
 62 var r1 = new RegExp('world');
 63 console.log(r1.exec('Hello, world!')); //['world']
 64 r1.compile('o');
 65 console.log(r1.exec('Hello, World!')); //['o']
 66 r1.compile('m');
 67 console.log(r1.exec('Hello, World!')); //null
 68 var r2 = new RegExp('world');
 69 console.log(r2.test('Hello, world!')); //true
 70 r2.compile('mazey');
 71 console.log(r2.test('Hello, world!')); //false
 72 2、正則表達式
 73 
 74 ^$:表示匹配值的開始和結尾。
 75 +:1+，一個或更多。
 76 *:0+，零個或更多。
 77 ?:0/1，零個或一個。
 78 {1,2}:1<=length<=2,長度。
 79 ():表示一個表達式的組。
 80 []:匹配的字符範圍，我理解爲一個塊，不少塊放在一個組()裏面。
 81 3、示例
 82 
 83 <form action="">
 84 輸入：<input type="text" name="mazey" id="mazey" placeholder="請輸入郵箱">
 85 <input type="button" value="驗證" onclick="check();">
 86 </form>
 87 <script>
 88 function check(){
 89     var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正則表達式
 90     var obj = document.getElementById("mazey"); //要驗證的對象
 91     if(obj.value === ""){ //輸入不能爲空
 92         alert("輸入不能爲空!");
 93         return false;
 94     }else if(!reg.test(obj.value)){ //正則驗證不經過，格式不對
 95         alert("驗證不經過!");
 96         return false;
 97     }else{
 98         alert("經過！");
 99         return true;
100     }
101 }
102 </script>