面试题之表单验证

最新推荐文章于 2023-01-27 22:48:58 发布

bit小兵

最新推荐文章于 2023-01-27 22:48:58 发布

阅读量327

点赞数

文章标签：面试 java

原文链接：http://www.cnblogs.com/renxiuxing/p/10519695.html

版权

面试题之表单验证

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

  <!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

bit小兵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试题之表单验证

面试题之表单验证面试的时候遇到一题，需要手撸代码进行表单验证，直接上代码。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证</title> </head> <body> <!--...
复制链接

扫一扫