• b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——表单验证

    目录

    目标效果：

    代码部分： 

    1.reg.js部分（全是重点）

    2.register.html部分（辅助作用，用于查看结构）

    3.register.css部分（辅助作用）

    4.base.css部分（辅助作用）

    目标效果：

    1.当输入的手机号，QQ号，昵称，短信验证码，登录密码，确认密码：如果符合标准，就提示正确的文字;如不符合标准，则提示不正确。

    2.判断确认密码是否与登录密码相等，来看确认密码是否正确。

    3.手机号正则表达式：/^1[3|4|5|7|8][0-9]{9}$/（11位）

    QQ号正则表达式：[1-9][0-9]{4,} (腾讯QQ号从10000开始)

    昵称正则表达式：/^[\u4e00-\u9fa5]{2,8}$/（2-8位的汉字）

    短信验证码正则表达式：/^\d{6}$/（6位的数字）

    登录密码正则表达式：/^[a-zA-Z0-9_-]{6,16}$/（6-16位的数字,大小写字母，下划线和短横线）

    e.g.1初始状态

    e.g.2输入的手机号不符合标准

     e.g.3输入的手机号符合标准

     e.g.4所有内容符合标准

    代码部分： 

    1.reg.js部分（全是重点）

    1. window.onload = function () {
    2.     var regtel = /^1[3|4|5|7|8]\d{9}$/;//手机号的正则表达式 11位
    3.     var regqq = /^[1-9]\d{4,}$/;//qq号的正则表达式 从10000开始
    4.     var regnc = /^[\u4e00-\u9fa5]{2,8}$/;//昵称的正则表达式 2-8位的汉字
    5.     var regmsg = /^\d{6}$/;//验证码的正则表达式 6位的数字
    6.     var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;//密码的正则表达式 6-16位的数字,大小写字母，下划线和短横线
    7.     var tel = document.querySelector('#tel');
    8.     var qq = document.querySelector('#qq');
    9.     var nc = document.querySelector('#nc');
    10.     var msg = document.querySelector('#msg');
    11.     var pwd = document.querySelector('#pwd');
    12.     var surepwd = document.querySelector('#surepwd');
    13.     regexp(tel, regtel);//传递 手机号参数 和 手机号的正则表达式，调用函数regexp
    14.     regexp(qq, regqq);//传递 qq号参数 和 qq号的正则表达式，调用函数regexp
    15.     regexp(nc, regnc);//传递 昵称参数 和 昵称的正则表达式，调用函数regexp
    16.     regexp(msg, regmsg);//传递 验证码参数 和 验证码的正则表达式，调用函数regexp
    17.     regexp(pwd, regpwd);//传递 密码参数 和 密码的正则表达式，调用函数regexp
    18.     function regexp(ele, reg) {//封装一个表单验证函数regexp，如果符合标准，就提示正确的文字;如不符合标准，则提示不正确
    19.         //ele是传递过来的参数，reg是该参数对应的正则表达式
    20.         ele.onblur = function () {
    21.             if (reg.test(this.value)) {
    22.                 // console.log('正确的');
    23.                 this.nextElementSibling.className = 'success';
    24.                 this.nextElementSibling.innerHTML = ' 恭喜您输入正确';
    25.             } else {
    26.                 // console.log('不正确');
    27.                 this.nextElementSibling.className = 'error';
    28.                 this.nextElementSibling.innerHTML = ' 格式不正确，请重新输入';
    29.             }
    30.         }
    31.     }
    32.     surepwd.onblur = function () {
    33.         if (this.value == pwd.value) {
    34.             this.nextElementSibling.className = 'success';
    35.             this.nextElementSibling.innerHTML = ' 恭喜您输入正确';
    36.         } else {
    37.             this.nextElementSibling.className = 'error';
    38.             this.nextElementSibling.innerHTML = ' 两次密码输入不一致';
    39.         }
    40.     }
    41. }

    2.register.html部分（辅助作用，用于查看结构）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>注册页面</title>
    7.     <!-- 初始化css -->
    8.     <link rel="stylesheet" href="css/base.css">
    9.     <!-- register css文件 -->
    10.     <link rel="stylesheet" href="css/register.css">
    11.     <script src="js/reg.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <div class="w">
    16.         <!-- header -->
    17.         <div class="header">
    18.             <div class="logo">
    19.                 <a href="index.html">
    20.                     <img src="img/logo.png" alt="">
    21.                 </a>
    22.             </div>
    23.         </div>
    24.         <!-- registerarea -->
    25.         <div class="registerarea">
    26.             <h3>
    27.                 注册新用户
    28.                 <em>
    29.                     我有账号，去<a href="login.html">登陆</a>
    30.                 </em>
    31.             </h3>
    32.             <div class="reg_form">
    33.  
    34.                 <form action="demo.php">
    35.                     <ul>
    36.                         <li>
    37.                             <label for="tel">手机号:</label>
    38.                             <input type="text" class="inp" id="tel">
    39.                             <span></span>
    40.                         </li>
    41.                         <li>
    42.                             <label for="">QQ:</label>
    43.                             <input type="text" class="inp" id="qq">
    44.                             <span></span>
    45.                         </li>
    46.                         <li>
    47.                             <label for="">昵称:</label>
    48.                             <input type="text" class="inp" id="nc">
    49.                             <span></span>
    50.                         </li>
    51.                         <li>
    52.                             <label for="">短信验证码:</label>
    53.                             <input type="text" class="inp" id="msg">
    54.                             <span></span>
    55.                         </li>
    56.                         <li>
    57.                             <label for="">登陆密码:</label>
    58.                             <input type="text" class="inp" id="pwd">
    59.                             <span></span>
    60.                         </li>
    61.                         <li class="safe">
    62.                             安全程度
    63.                             <em class="ruo">弱</em>
    64.                             <em class="zhong">中</em>
    65.                             <em class="qiang">强</em>
    66.                         </li>
    67.  
    68.                         <li>
    69.                             <label for="">确认密码:</label>
    70.                             <input type="text" class="inp" id="surepwd">
    71.                             <span></span>
    72.                         </li>
    73.                         <li class="agree">
    74.  
    75.                             <input type="checkbox">同意协议并注册
    76.                             <a href="#">《知果果用户协议》</a>
    77.                         </li>
    78.                         <li>
    79.                             <input type="submit" value="完成注册" class="over">
    80.                         </li>
    81.                     </ul>
    82.                 </form>
    83.  
    84.             </div>
    85.         </div>
    86.         <div class="footer">
    87.             <p class="links">
    88.                 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
    89.             </p>
    90.  
    91.             <p class="copyright">
    92.                 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
    93.                 京ICP备08001421号京公网安备110108007702
    94.             </p>
    95.         </div>
    96.     </div>
    97. </body>
    98.  
    99. </html>

    3.register.css部分（辅助作用）

    1. .w {
    2.     width: 1200px;
    3.     margin: auto;
    4. }
    5.  
    6. .header {
    7.     height: 82px;
    8.     border-bottom: 2px solid #b1191a;
    9. }
    10.  
    11. .logo {
    12.     padding-top: 15px;
    13. }
    14.  
    15. .registerarea {
    16.     height: 580px;
    17.     border: 1px solid #ccc;
    18.     margin-top: 20px;
    19. }
    20.  
    21. .registerarea h3 {
    22.     height: 40px;
    23.     border-bottom: 1px solid #ccc;
    24.     background-color: #ececec;
    25.     padding: 0 10px;
    26.     font-weight: 400;
    27.     line-height: 40px;
    28.     font-size: 18px;
    29. }
    30.  
    31. .registerarea h3 em {
    32.     float: right;
    33.     font-size: 14px;
    34. }
    35.  
    36. .registerarea a {
    37.     color: #c81623;
    38. }
    39.  
    40. .reg_form {
    41.     width: 600px;
    42.     height: 400px;
    43.     margin: 40px auto 0;
    44. }
    45.  
    46. .reg_form li {
    47.     margin-bottom: 15px;
    48. }
    49.  
    50. .reg_form label {
    51.     display: inline-block;
    52.     width: 100px;
    53.     height: 36px;
    54.     line-height: 36px;
    55.     text-align: right;
    56. }
    57.  
    58. .inp {
    59.     width: 238px;
    60.     height: 34px;
    61.     border: 1px solid #ccc;
    62.     margin-left: 10px;
    63. }
    64.  
    65. .error {
    66.     color: #df3033;
    67.     margin-left: 10px;
    68. }
    69.  
    70. .error_icon,
    71. .success_icon {
    72.     display: inline-block;
    73.     width: 20px;
    74.     height: 20px;
    75.     background: url(../img/error.png) no-repeat;
    76.     vertical-align: middle;
    77.     margin-top: -2px;
    78. }
    79.  
    80. .success {
    81.     color: #40b83f;
    82.     margin-left: 10px;
    83. }
    84.  
    85. .success_icon {
    86.     background-image: url(../img/success.png);
    87. }
    88.  
    89. .safe {
    90.     padding-left: 187px;
    91.     color: #b2b2b2;
    92. }
    93.  
    94. .safe em {
    95.     padding: 0 12px;
    96.     color: #fff;
    97. }
    98.  
    99. .ruo {
    100.     background-color: #de1111;
    101. }
    102.  
    103. .zhong {
    104.     background-color: #40b83f;
    105. }
    106.  
    107. .qiang {
    108.     background-color: #f79100;
    109. }
    110.  
    111. .agree {
    112.     padding-top: 20px;
    113.     padding-left: 100px;
    114. }
    115.  
    116. .agree input {
    117.     vertical-align: middle;
    118.     margin-right: 5px;
    119. }
    120.  
    121. .agree a {
    122.     color: #1ba1e6;
    123. }
    124.  
    125. .over {
    126.     width: 200px;
    127.     height: 34px;
    128.     background-color: #c81623;
    129.     margin: 30px 0 0 130px;
    130.     border: none;
    131.     color: #fff;
    132.     font-size: 14px;
    133. }
    134.  
    135. .footer {
    136.     height: 120px;
    137.     text-align: center;
    138. }
    139.  
    140. .links {
    141.     margin-top: 20px;
    142.     height: 30px;
    143. }
    144.  
    145. .copyright {
    146.     line-height: 20px;
    147. }

    4.base.css部分（辅助作用）

    1. /*清除元素默认的内外边距  */
    2. * {
    3.     margin: 0;
    4.     padding: 0
    5. }
    6. /*让所有斜体 不倾斜*/
    7. em,
    8. i {
    9.     font-style: normal;
    10. }
    11. /*去掉列表前面的小点*/
    12. li {
    13.     list-style: none;
    14. }
    15. /*图片没有边框   去掉图片底侧的空白缝隙*/
    16. img {
    17.     border: 0;  /*ie6*/
    18.     vertical-align: middle;
    19. }
    20. /*让button 按钮 变成小手*/
    21. button {
    22.     cursor: pointer;
    23. }
    24. /*取消链接的下划线*/
    25. a {
    26.     color: #666;
    27.     text-decoration: none;
    28. }
    29.  
    30. a:hover {
    31.     color: #e33333;
    32. }
    33.  
    34. button,
    35. input {
    36.     font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    37.     /*取消轮廓线 蓝色的*/
    38.     outline: none;
    39. }
    40.  
    41. body {
    42.     background-color: #fff;
    43.     font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    44.     color: #666
    45. }
    46.  
    47. .hide,
    48. .none {
    49.     display: none;
    50. }
    51. /*清除浮动*/
    52. .clearfix:after {
    53.     visibility: hidden;
    54.     clear: both;
    55.     display: block;
    56.     content: ".";
    57.     height: 0
    58. }
    59.  
    60. .clearfix {
    61.     *zoom: 1
    62. }

  • 相关阅读:
    HDFS基础入门
    2023年“羊城杯”网络安全大赛 决赛 AWDP [Break+Fix] Web方向题解wp 全
    【uniapp+云函数调用】人脸识别，实人认证，适用于app，具体思路解析，已实现
    高校学生档案管理系统（Angularjs+HTML+CSS+bootstrap）
    磁场设备—亥姆霍兹线圈
    操作系统实验三虚拟存储器管理之模拟页面置换算法（FIFO&LRU）
    java 注解编程
    STM32 - 笔记4
    【二叉树进阶】红黑树（Red Black Tree） - 平衡二叉搜索树
    【java期末复习题】第10章 Java输入与输出
  • 原文地址：https://blog.csdn.net/weixin_72322475/article/details/127984948