js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
一、总结
1、input的pattern属性：里面可以直接放正则表达式，<input type="text" id="yzbm" name="yzbm" pattern="^\d{6}$">
2、正则表达式加起^始$：var reg=/^\d{6}$/
二、js进阶正则表达式14验证邮编
练习1：验证邮政编码
- 实例描述：
验证用户的邮政编码是否合法。
- 案例要点：
字符串中的内容必须是数字
位数必须是6位。
- HTML5 中的新属性 pattern。
pattern 属性规定用于验证输入字段的模式。
pattern 属性适用于以下 input 类型：text, search, url, telephone, email 以及 password 。
三、代码
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>验证邮政编码</title> 6 <style type="text/css"> 7 li{ 8 font-size: 20px; 9 width: 500px; 10 background: rgba(0,180,80,0.3); 11 padding: 10px; 12 margin: 10px; 13 } 14 15 </style> 16 </head> 17 <body> 18 <form name='myform' action=" " method="get" onsubmit="check()"> 19 邮政编码：<input type="text" id="yzbm" name="yzbm"> 20 <input type="submit"> <input type="reset" value="重置"> 21 </form> <br> 22 <script type="text/javascript"> 23 function check(){ 24 var str=document.getElementById('yzbm').value; 25 //var str=myform.yzbm.value; 26 //alert(str) 27 var reg=/^\d{6}$/ //1、正则表达式加起始 28 if (reg.test(str)) { 29 alert('格式正确') 30 }else{ 31 alert('格式不正确，请重新输入') 32 } 33 } 34 </script> 35 <form name='myform' action="reg.php" method="post"> 36 邮政编码：<input type="text" id="yzbm" name="yzbm" pattern="^\d{6}$"> //2、input的pattern属性：里面可以直接放正则表达式 37 <input type="submit"> <input type="reset" value="重置"> 38 </form> 39 </body> 40 </html>
