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如何使用正则表达式完成一个邮箱的验证?