面试题之表单验证

作者：喵喵爱编程 | 2024-08-06 17:49:24

踩

表单验证面试题

面试题之表单验证

面试的时候遇到一题，需要手撸代码进行表单验证，直接上代码。


  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>表单验证</title>
  </head>
  <body>
  <!--
      表单验证
          输入：姓名
          输入：密码
          输入：确认密码
      要求： 1.两次密码不可为空且相同，并且不少于6位；
           2.姓名不可为空，只能为字母、数字、或下划线；
           3.使用原生js中dom对象
 
      更多资料、面试题可以微信关注公众号
      明叶师兄的学堂
      进行查看
  -->
 
  <form action="" method="get">
      姓名：<input type="text" id="Name" name="Name"> 密码：
      <input type="text" id="Secret1" name="Secret1"> 确认：
      <input type="text" id="Secret2" name="Secret2" class="ok">
      <input type="button" id="submit" name="submit" value="提交" onclick="button_submit()">
  </form>
  </body>
  <script>
  function button_submit() {
      var name = document.getElementById("Name").value;
      console.log(name);
      console.log(isName(name));
 
      var secret1 = document.getElementsByName("Secret1")[0].value;
      console.log(secret1);
      var secret2 = document.getElementsByClassName("ok")[0].value;
      console.log(secret2);
      //输出字符串的位数
      console.log(secret2.length);
      if(secret1 != null && secret2 != null) {
          if(secret1.length >= 6) {
              if(secret1 == secret2) {
                  if(name != null) {
                      if (isName(name) == true) {
                          alert("注册成功！");
                      } else{
                          alert("姓名填写不符合规范！");
                      }
                  } else {
                      alert("姓名不可为空！");
                  }
              } else {
                  alert("请确保两次输入的密码相同！");
              }
          } else {
              alert("密码不可以小于6位！");
          }
      } else {
          alert("密码不可以为空！");
      }
  }
 
  /*校验名字格式 */
  function isName(str) {
      var regu = "^[0-9a-zA-Z\_]+$";
      var reg = new RegExp(regu);
      return reg.test(str);
  }
  </script>
  </html>

更多精彩内容，请关注微信关注公众号 明叶师兄的学堂

转载于:https://www.cnblogs.com/renxiuxing/p/10519695.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/938556