实战表单验证学习 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单事件</title>
    <style>
      @import url(style1.css);
    </style>
  </head>
  <body>
    <!-- <form action="check.php" method="POST" id="login" onsubmit="return false"> -->
    <form action="check.php" method="POST" id="login">
      <label class="title">用户登录</label>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="" autofocus />
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" />
      <!-- <button name="submit" type="submit">登录</button> -->
      <button name="submit">登录</button>
    </form>

    <script>
      const login = document.forms.login;
      //   login.onsubmit = () => console.log("提交了");
      // 禁用元素的默认行为
      //   login.onsubmit = ev => ev.preventDefault();
      //   login.onsubmit = function (ev) {
      //     ev.preventDefault();
      //   };

      //   login.控制的name属性就可以
      login.submit.onclick = ev => {
        //   禁用默认提交行为
        ev.preventDefault();
        // 禁用冒泡
        ev.stopPropagation();
        // 按钮
        // console.log(ev.currentTarget);
        // 表单
        // console.log(ev.currentTarget.form);
        // 非空验证
        isEmpty(ev.currentTarget.form);
      };
      function isEmpty(form) {
        console.log(form.email.value.length);
        console.log(form.password.value.length);
        if (form.email.value.length === 0) {
          alert("邮箱不能为空");
          form.email.focus();
          return false;
        } else if (form.password.value.length === 0) {
          alert("密码不能为空");
          form.email.focus();
          return false;
        } else {
          alert("验证通过");
        }
      }

      //   login.email.oninput = ev => console.log(ev.target.value);
      //   login.email.onblur = ev => console.log(ev.target.value);
      //   change: 值变了且失去焦点才触发 input + blur
      //   login.email.onchange = ev => console.log(ev.target.value);

      // submit: 提交
      // focus: 焦点
      // input: 用户输入内容时发生
      // blur: 失去焦点触发
      // change: 值发生变化
      //   select:
    </script>
  </body>
</html>

　　

body {
    background-color: mediumturquoise;/
    color: #444;
    font-weight: lighter;
  }
  #login {
    width: 20em;
    border-radius: 0.3em;
    box-shadow: 0 0 1em #888;
    box-sizing: border-box;
    padding: 1em 2em 1em;
    margin: 2em auto;
    background-color: paleturquoise;
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 1em 0;
  }
  #login .title {
    grid-area: auto / span 2;
    place-self: center;
  }
  #login input {
    border-radius: 0.3em;
    border: none;
    padding-left: 0.3em;
  }
  #login input:focus {
    outline: none;
    box-shadow: 0 0 5px seagreen;
    border-radius: 0.2em;
    transition: 0.5s;
  }
  #login button {
    grid-area: auto / 2 / auto;
    outline: none;
    background-color: lightseagreen;
    border: none;
    height: 2em;
    color: #fff;
  }
  #login button:hover {
    cursor: pointer;
    background-color: seagreen;
    transition: 0.5s;
  }

　　

posted @ 2024-06-14 21:29  豹纹守宫  阅读(29)  评论(0)    收藏  举报