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 。

三、代码

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>验证邮政编码</title>
<style type="text/css">
li{
font-size: 20px;
width: 500px;
background: rgba(0,180,80,0.3);
padding: 10px;
margin: 10px;
} </style>
</head>
<body>
<form name='myform' action=" " method="get" onsubmit="check()">
邮政编码:<input type="text" id="yzbm" name="yzbm">
<input type="submit"> <input type="reset" value="重置">
</form> <br>
<script type="text/javascript">
function check(){
var str=document.getElementById('yzbm').value;
//var str=myform.yzbm.value;
//alert(str)
var reg=/^\d{6}$/ //1、正则表达式加起始
if (reg.test(str)) {
alert('格式正确')
}else{
alert('格式不正确,请重新输入')
}
}
</script>
<form name='myform' action="reg.php" method="post">
邮政编码:<input type="text" id="yzbm" name="yzbm" pattern="^\d{6}$"> //2、input的pattern属性:里面可以直接放正则表达式
<input type="submit"> <input type="reset" value="重置">
</form>
</body>
</html>
上一篇:js进阶正则表达式10-分组-多行匹配-正则对象的属性(小括号作用:分组,将小括号里面的东西看成一个整体,因为量词只对前一个字符有效)(多行匹配:m)(属性使用:reg.global)


下一篇:session的工作原理