<form action="">
　　輸入：<input type="text" name="mazey" id="mazey" placeholder="請輸入郵箱">
　　<input type="button" value="驗證" onclick="check();">
</form>

<script>
function check(){
　　var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正則表示式
　　var obj = document.getElementById("mazey"); //要驗證的物件
　　if(obj.value === ""){ //輸入不能為空
　　　　alert("輸入不能為空!");
　　　　return false;
　　}else if(!reg.test(obj.value)){ //正則驗證不通過，格式不對
　　　　alert("驗證不通過!");
　　　　return false;
　　}else{
　　　　alert("通過！");
　　　　return true;
　　}
}
</script>

一、RegExp

1.1 建立RegExp物件

new RegExp("必選,正則表示式","可選,匹配模式g,i,m")

1.2 RegExp物件的方法

• test:檢索字串中的指定值，返回True或False。
• exec:檢索字串中的指定值，返回找到的值，沒有則null。
• complie:用於改變正則表示式，或增刪匹配模式。

1.2.1 test()

var r1 = new RegExp('world');
console.log(r1.test('Hello, world!')); //true
console.log(r1.test('Hello, World!')); //false
var r2 = new RegExp('world', 'i'); //大小寫不敏感
console.log(r2.test('Hello, World!')); //true
var r3 = new RegExp(/world/i); //簡寫
console.log(r3.test('Hello, World!')); //true

1.2.2 exec()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world', 'i'); //大小寫不敏感
console.log(r2.exec('Hello, World!')); //['world']
var r3 = new RegExp(/world/i); //簡寫
console.log(r3.exec('Hello, World!')); //['world']
var r4 = new RegExp('o');
console.log(r4.exec('Hello, World!')); //['o']
var r5 = new RegExp('o', 'gi');
console.log(r5.exec('Hello, WOrld!')); //['o']
console.log(r5.lastIndex); //5 匹配文字的第一個字元的位置，o為4，下一個位置為5
console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一個o後呼叫繼續匹配
console.log(r5.lastIndex); //9
console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
console.log(r5.lastIndex); //0 lastIndex重置為0

1.2.3 complie()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
r1.compile('o');
console.log(r1.exec('Hello, World!')); //['o']
r1.compile('m');
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world');
console.log(r2.test('Hello, world!')); //true
r2.compile('mazey');
console.log(r2.test('Hello, world!')); //false

二、正則表示式

• ^$:表示匹配值的開始和結尾。
• +:1+，一個或更多。
• *:0+，零個或更多。
• ?:0/1，零個或一個。
• {1,2}:1<=length<=2,長度。
• ():表示一個表示式的組。
• []:匹配的字元範圍，我理解為一個塊，很多塊放在一個組()裡面。

三、示例

<form action="">
輸入：<input type="text" name="mazey" id="mazey" placeholder="請輸入郵箱">
<input type="button" value="驗證" onclick="check();">
</form>
<script>
function check(){
    var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正則表示式
    var obj = document.getElementById("mazey"); //要驗證的物件
    if(obj.value === ""){ //輸入不能為空
        alert("輸入不能為空!");
        return false;
    }else if(!reg.test(obj.value)){ //正則驗證不通過，格式不對
        alert("驗證不通過!");
        return false;
    }else{
        alert("通過！");
        return true;
    }
}
</script>