JS Form常用操作

发表于 | 分类于
JS Form常用操作

获取表单元素：

要获取表单元素，可以使用document.getElementById()、document.forms或document.querySelector()等方法。

例如：

1
2
3
4
5
6
7
8
// 通过id获取表单元素
const myForm = document.getElementById('myForm');

// 通过表单name获取表单元素
const myForm = document.forms.myForm;

// 通过选择器获取表单元素
const myForm = document.querySelector('form');

提交表单：

表单提交可以通过表单元素的submit()方法来触发。

例如：

1
2
const myForm = document.getElementById('myForm');
myForm.submit();

重置表单

表单重置可以通过表单元素的reset()方法来触发。

例如：

1
2
const myForm = document.getElementById('myForm');
myForm.reset();

验证表单

表单验证可以使用 HTML5 的表单验证属性（例如required、pattern等）和 JavaScript 的验证逻辑结合使用。你可以监听表单的submit事件，在事件处理程序中使用 JavaScript 进行验证。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  // 阻止表单默认提交
  event.preventDefault();

  // 进行表单验证逻辑
  if (isValidForm()) {
    // 验证通过，可以提交表单
    myForm.submit();
  } else {
    // 验证失败，进行错误处理
    alert('请填写必要的字段');
  }
});

获取Form的值

注意单选和多选需要特殊处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
submitForm() {
  let form = document.forms["mform"]; // 通过表单的name属性获取表单对象
  const formData = {};
  for (let i = 0; i < form.elements.length; i++) {
    const element = form.elements[i];
    const elementName = element.name;

    if (elementName) {
      if (element.type === "radio") {
        if (!(elementName in formData)) {
          formData[elementName] = "";
        }
        if (element.checked) {
          formData[elementName] = element.value;
        }
      } else if (element.type === "checkbox") {
        if (!(elementName in formData)) {
          formData[elementName] = [];
        }
        if (element.checked) {
          formData[elementName].push(element.value);
        }
      } else {
        formData[elementName] = element.value;
      }
    }
  }

  const jsonOutput = JSON.stringify(formData);
  console.log(jsonOutput);
}

HTML

1
2
3
4
5
6
7
8
9
<form name="mform">
  <input type="text" name="name" value="John Doe">
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="checkbox" name="hobbies" value="reading"> Reading
  <input type="checkbox" name="hobbies" value="cooking" checked> Cooking
  <input type="checkbox" name="hobbies" value="sports" checked> Sports
  <input type="submit" value="Submit">
</form>