實戰表單驗證學習

喜欢看电影的蜗牛發表於2024-06-14
<!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;
  }

　　

相關文章