表单元素及表单事件

表单元素及表单事件

表单元素可以通过document.forms获取表单集合，后边跟一个表单的id值，选定具体表单，也可以使用下标。
表单有默认的提交行为，可以在表单元素中加入onsubmit=”return false”，设置submit属性，取消器提交行为，也可以在javascipt代码中使用preventDefault()函数取消提交行为。

• html

<!-- onsubmit="return false"  禁用表单默认提交行为-->
    <form id="register" action="" onsubmit="return false">
      <div>
        <label for="username">用户名：</label>
        <input
          type="text"
          name="username"
          placeholder="用户名不能少于6位字符"
          required
        />
      </div>
      <button>注册</button>
    </form>

• javascript

 // 表单选择器
      const form = document.forms.register;
      console.log(form.username.value);
      const btn = document.querySelector("button");
      // 监听事件
      btn.addEventListener("click", ($) => {
        // 表单元素可以通过元素的name属性获取
        //用户名长度
        let len = form.username.value.length;
        if (len < 6) {
          alert("用户名少于8位");
          return false;
        }
      });