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进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）的更多相关文章
- js进阶-9-3/4 form对象有哪些常用属性
js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...
- html5中 input的pattern属性 和 details/summary元素
html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...
- 正则表达式获取字符串的input标签的属性值
直接上正则表达式: (?<=\<input.*value=\").*?(?=\") 字符串如下: <form action="https://www.b ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
- ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证
ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- js进阶正则表达式实现过滤字符串（RegExp对象操作正则表达式）（正则：regular）（表达式：expression）
js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression) 一.总结 1.str_replace:正则作用:高效快速匹配 2.break ...
- js进阶正则表达式13RegExp对象方法（RegExp对象的方法：compile，test，exec）（子表达式 var reg1=/([a-z]+)\d/）
js进阶正则表达式13RegExp对象方法(RegExp对象的方法:compile,test,exec)(子表达式 var reg1=/([a-z]+)\d/) 一.总结 1.RegExp对象有三个方 ...
随机推荐
- 1、Task类构造函数
Task类的构造函数接收一个无参无返回值的委托: 1: Task task = new Task(TaskMethod); 2: task.Start();例子: task = new Task(( ...
- Win8.1恢复这台电脑里的6个文件夹
平台:win8.1 问题:网络下载的ghost版8.1,装好后“这台电脑”里没有6个常用的文件夹. 解决:导入下列注册表项即可 Windows Registry Editor Version 5.00 ...
- 对ng-repeat的表格内容添加不同样式：ng-style
对ng-repeat的表格内容添加不同样式,html代码: <tr ng-repeat="x in tableData"> <td>{{x.networkN ...
- Python Unittest模块测试执行
记录一下Unittest的测试执行相关的点 一.测试用例执行的几种方式 1.通过unittest.main()来执行测试用例的方式: if __name__ == "__main__&quo ...
- J2SE核心开发实战(一）——认识J2SE
认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...
- Android开机自动运行APP——BroadcastReceiver
前言: 有些时候,应用需要在开机时就自动运行,例如某个自动从网上更新内容的后台service.怎样实现开机自动运行的应用?在撰写本文时,联想到高焕堂先生以“Don't call me, I'll ca ...
- amazeui学习笔记一（开始使用5）--藏品collections
amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...
- socket UDP简单通讯
// // SocketUDPServerClient.m // socket_server_client // // Created by lujunjie on 2016/11/26. // Co ...
- CSS3常用属性及用法
1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...
- Java Web学习总结（7）——HttpServletRequest对象
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...