通过原生DOM操作表单我们将获取表单的方式大体分为如下几种： Document对象提供的定位页面元素的一系列方法 Doc

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第四十五篇-《通过原生DOM操作表单》

本系列文章在掘金首发，编写不易转载请获得允许

获取表单

获取表单元素

我们将获取表单的方式大体分为如下几种：

Document对象提供的定位页面元素的一系列方法
Document对象提供的forms属性，该属性用于获取当期HTML页面中所有表单的集合，返回HTMLCollection对象，该对象封装了当前HTML页面中的所有表单对象。

获取表单组件元素

获取表单的组件元素的方式，大体可以分为以下几种方式：

Document对象提供的定位页面元素的一系列方法
HTMLFormElement对象的elements属性，该属性用于获取指定表单的所有组件集合。

值得注意的是，HTMLFormElement对象的提供的elements属性获取的表单组件中，不包含type为image的<input>元素

表单事件

input事件

当一个<input>、<select>和<textarea>元素的value被修改时，会触发**input**事件。

change事件

当用户更改<input>、<select>和<textarea>元素的值并提交这个更改时，change事件在这些元素上触发。

关于这两个事件的示例代码如下：

<body>
  <form action="#">
    <input id="input"
           type="text"
           autocomplete="off">
  </form>
  <script>
    var $input = document.getElementById('input')

    $input.addEventListener('input', function () {
      console.log('input事件触发：' + this.value)
    })
    $input.addEventListener('change', function () {
      console.log('change事件触发：' + this.value)
    })
  </script>
</body>

代码运行结果如下：

01_input事件和change事件.gif

由上图我们可以看出，当我们进行输入的时候就会触发input事件，当时只有当改变的这个值进行保存之后才会触发chagne事件。

下拉列表的操作

下拉列表有<select>和<option>元素创建的。<select>元素在DOM中对应的是HTMLSelectElement对象，<option>元素在DOM中对应的是HTMLOptionElement对象，这两个对象都提供了一些属性和方法，方便操作下拉列表。

HTMLSelectElement对象

HTMLSelectElement对象是<select>元素在DOM中对应的对象。

该对象提供的属性如下表所示：

属性名称	描述
`length`	表示当前`<select>`元素中`<option>`元素的个数
`multiple`	表示`<select>`元素是否允许多项选择，等价于HTML中的`multiple`属性
`options`	当前`<select>`元素中`<option>`元素对象的集合
`selectedIndex`	代表第一个被选中的 `<option>` 元素。`-1`代表没有元素被选中。
`size`	当前`<select>`元素中可见的行数，等价于HTML中的size属性。

该对象提供的方法如下表所示：

方法名称	描述
`add(item [, before])`	将`<option>`元素添加到当前`<select>`元素的选中元素集合中。
`item(index)`	放回索引值为`index`的`<option>`元素。如果没有，则返回`null`。
`remove(index)`	从当前`<select>`元素的选项集合中删除指定索引值的`<option>`元素

示例代码如下

<body>
  <form action="#">
    <select id="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>
    <select id="city2" multiple size="5">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>
  </form>
  <script>
    var city = document.getElementById('city')
    var city2 = document.getElementById('city2')
    // 测试属性 
    console.log(city.length)        // city的长度
    console.log(city2.multiple)     // city2是否可以多选
    console.log(city.options)       // city中的<option>的集合
    console.log(city.selectedIndex) // 返回当前选中你的索引值
    console.log(city2.size)         // city2的可视长度
    // 测试方法
    var option = city.options[0] // 获取city1中的第一个元素
    city2.add(option)
    console.log(city2.item(3))
    city2.remove(0)
  </script>
</body>

HTMLOptionElement 对象

HTMLOptionElement对象是<option>元素在其所属的选项列表中的索引值。

该对象提供的属性如下所示

属性名称	描述
index	当前`<option>`元素在其所属的选项列表中的索引值。
selected	表示当前`<option>`元素是否被选中
text	当前`<option>`元素的文本属性
value	当前`<option>`元素的value属性值。

示例代码如下

<body>
  <form action="#">
    <select id="city">
      <option id="bj"
              value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>
  </form>
  <script>
    var bj = document.getElementById('bj')
    // 测试属性 
    console.log(bj.index) // 0
    console.log(bj.selected) // true
    console.log(bj.text) // 背景
    console.log(bj.value) // bg
  </script>
</body>

表单验证

HTML5验证API

HTML5提供了一组用于表单验证的API，目前主流浏览器对HTML5提供的验证API支持的越来越好。

验证API的属性如下表所示：

属性名称	描述	配合的表单属性/元素/方法
`validity`	一个ValidityState对象，描述元素的验证状态	`<form>`元素
`validity.customError`	如果元素设置了自定义错误，返回`true`，否则返回`false`	`setCustomValidity()`方法
`validity.patternMismatch`	如果元素的值不匹配所设置的正则表达式，返回`true`，否则返回`false`	`pattern`属性
`validity.rangeOverflow`	如果元素的值高于所设置的最大值，返`true`，否则返回`false`	`max`属性
`validity.rangeUnderflow`	如果元素的值低于所设置的最小值，返回`true`，否则返回`false`。	`min`属性
`validity.stepMismatch`	如果元素的值不符合`step`属性的规则，返回`true`，否则返回 `false`	`step`属性
`validity.tooLong`	如果元素的值超过设置的最大长度，返回`true`，否则返回 `false`	`maxLength`属性
`validity.typeMismatch`	如果元素的值出现语法错误，返回`true`，否则返回 `fals`e	`<input type="url">`等元素。
`validity.valueMissing`	如果元素设置了`required`属性且值为空，返回`true`，否则返回`false`	`required`属性
`validity.valid`	如果元素的值不存在验证问题，返`true`，否则返回`false`

验证 API 的方法如下表所示

方法名称	描述
checkValidity()	如果元素的值不存在验证问题，返回true，否则返回false
setCustomValidity(message)	该元素添加一个自定义的错误消息；如果设置了自定义的错误消息，则该元素被认为是无效的，并显示指定的错误。

示例代码如下所示：

<body>
  <form action="#">
    <input type="text"
           id="username"
           required>
    <input type="submit">
  </form>
  <script>
    var username = document.getElementById('username')
    username.addEventListener('blur', function () {
      var validity = username.validity
      // 如果当前文本框为空，则使用自己定义的错误提示，否则将错误提示的提示信息设置为空
      if (validity.valueMissing) {
        username.setCustomValidity("请输入用户名")
      } else {
        username.setCustomValidity("")
        console.log('提交成功')
      }
    })
  </script>
</body>

此时当我们提交一个空的内容时，会提示错误

值得注意的是，当自定义错误提示后需要没有错误时，将错误信息置位空。

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐