js如何使用正則表達式驗證電話號碼（可選區號）和郵箱？（分步驟）
一、總結
js進階正則表達式16電話號碼和郵箱正則（分類解決郵箱驗證）（分組加？解決電話號碼區號選擇問題）（[\w\.-]中括號解決郵箱前半字段的多種情況）
1、var reg=/^(\d{3,4}-)?\d{7,8}$/ //1、分組加？解決電話號碼區號選擇問題
2、var reg=/^[\w\.-]+@[a-z0-9]+\.[a-z]+$/i //1、[\w\.-]中括號解決郵箱前半字段的多種情況
3、分類或者說分部分來解決郵箱驗證
二、js進階正則表達式16電話號碼和郵箱正則
練習3：驗證電話號碼
- 實例描述：驗證輸入的固定電話號碼是否合法
- 案例要點：
區號部分為3-4位數字
使用“-”作為分隔符
電話號碼部分為7/8位數字
練習4：驗證郵箱
- 實例描述：驗證用戶郵箱是否合法
-
-
可以分為三部分： // 2、分類或者說分部分來解決郵箱驗證
- 用戶名部分為英文、字母、數字、"_"
- @部分
- 域名部分，可以分解為英文字母+‘.’+字母三部分
三、代碼
1、驗證電話號碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>驗證電話號碼</title> 6 </head> 7 <body> 8 <form name='myform' action=" " method="get" onsubmit="check()"> 9 固定電話：<input type="text" id="sfz" name="email" pattern="^(\d{3,4}-)?\d{7,8}$"> 10 <input type="submit"> <input type="reset" value="重置"> 11 </form> <br> 12 <script type="text/javascript"> 13 var str1='86836180' 14 var str2='010-86836180' 15 // var reg=/^(\d{3,4}-)?\d{7,8}$/ //1、分組加？解決電話號碼區號選擇問題 16 var reg=/^(\d{3,4}-)?\d{7,8}$/ 17 //alert(reg.test(str2)) 18 </script> 19 </body> 20 </html>
2、驗證郵箱
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>驗證郵箱</title> 6 </head> 7 <body> 8 <form name='myform' action=" " method="get" onsubmit="check()"> 9 郵箱：<input type="text" id="email" name="email" > 10 <input type="submit"> <input type="reset" value="重置"> 11 </form> <br> 12 <script> 13 /* 14 var str1=365966179@qq.com 15 var str2=jiyanpeng@126.com 16 var str2=ji_yanpeng@126.com 17 var reg=/^\w+@[a-z0-9]+\.[a-z]+$/i //注：郵箱種類較多，該模式不能匹配所有的郵箱格式 18 var reg=/^[\w\.-]+@[a-z0-9]+\.[a-z]+$/i //1、[\w\.-]中括號解決郵箱前半字段的多種情況 19 var reg=/^[\w\.-]+@[\w-]+\.[a-z]+$/i 20 */ 21 function check(){ 22 var str=document.getElementById('email').value; 23 //var str=myform.email.value; 24 //alert(str) 25 var reg=/^\w+@[a-z0-9]+\.[a-z]+$/i 26 if (reg.test(str)) { 27 alert('格式正確') 28 }else{ 29 alert('格式不正確，請重新輸入') 30 } 31 } 32 </script> 33 </body> 34 </html>
四、測試題-簡答題
1、js如何使用正則表達式完成一個帶區號（也可不帶）的電話號碼的驗證？
2、js如何使用正則表達式完成一個郵箱的驗證？