zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    给博客园编辑器完善个插件及简单产品化工作
    在Visual Studio中新增生成项目
    用了三星Dex,我已经快一个月回家没开过电脑了
    BizTalk证书相关操作
    定长文本格式编辑神器
    B2B相关编码说明
    OFTP简介
    Apigee 简介与简单试用
    重置BizTalk RosettaNet
    BizTalk Map 累积连接字符串
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9094803.html
Copyright © 2011-2022 走看看