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属性）（正则表达式加起^始$）的更多相关文章

  1. js进阶-9-3/4 form对象有哪些常用属性

    js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...

  2. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  3. 正则表达式获取字符串的input标签的属性值

    直接上正则表达式: (?<=\<input.*value=\").*?(?=\") 字符串如下: <form action="https://www.b ...

  4. 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 ...

  5. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  6. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  7. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  8. js进阶正则表达式实现过滤字符串（RegExp对象操作正则表达式）（正则：regular）（表达式：expression）

    js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression) 一.总结 1.str_replace:正则作用:高效快速匹配 2.break ...

  9. 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. 从“窃听门”事件解读手机Rootkit攻击

    从"窃听门"事件解读手机Rootkit攻击 在今年五月讲述了手机流氓软件危害与防治(http://chenguang.blog.51cto.com/350944/557191)文章 ...

  2. ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包，Styles.Render()输出风格包：

    ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...

  3. BZOJ1576: [Usaco2009 Jan]安全路经Travel(树链剖分)

    Description Input * 第一行: 两个空格分开的数, N和M * 第2..M+1行: 三个空格分开的数a_i, b_i,和t_i Output * 第1..N-1行: 第i行包含一个数 ...

  4. Android时间戳与字符串相互转换

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...

  5. Web应用开发（Servlet+html+Mysql）入门小示例

    在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下:   新建fo ...

  6. 00087_File

    1.IO概述 (1)要把数据持久化存储,就需要把内存中的数据存储到内存以外的其他持久化设备(硬盘.光盘.U盘等)上: (2)当需要把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操作 ...

  7. Docker使用Dockerfile创建Centos(tomcat+jdk)镜像

    原文链接:https://blog.csdn.net/qq_37936542/article/details/80824389 Docker构建镜像的方法主要有两种:    (1)使用docker c ...

  8. BUFSIZ

    转http://www.judymax.com/archives/262 今天在看示例程序时冒出来一句args = emalloc(BUFSIZ); BUFSIZ是什么意思,查了一下才明白. 这是st ...

  9. AdminLTE的使用（转）

    官方文档link1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta c ...

  10. js实现第一次打开网页弹出指定窗口（常用功能封装很好用）

    js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...