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>