JavaScript 表单属性和方法

JavaScript 提供了丰富的表单属性和方法，用于操作和控制 HTML 表单元素。以下是主要的表单属性和方法：

表单属性

通用表单属性

• elements - 返回表单中所有元素的集合
• length - 返回表单中元素的数目
• name - 设置或返回表单的名称
• method - 设置或返回表单的 HTTP 方法 (GET/POST)
• action - 设置或返回表单提交的 URL
• target - 设置或返回表单提交后接收响应的窗口/框架
• enctype - 设置或返回表单数据的编码类型
• acceptCharset - 设置或返回表单使用的字符集
• autocomplete - 设置或返回表单是否应启用自动完成
• noValidate - 设置或返回表单是否应进行验证

表单状态属性

• disabled - 设置或返回表单是否应被禁用
• readOnly - 设置或返回表单是否为只读

表单方法

主要表单方法

• submit() - 提交表单
• reset() - 重置表单
• checkValidity() - 检查表单元素的有效性
• reportValidity() - 报告表单元素的有效性状态

表单元素属性和方法

通用表单元素属性

• value - 设置或返回元素的值
• name - 设置或返回元素的名称
• type - 返回元素的类型
• form - 返回包含该元素的表单引用
• disabled - 设置或返回元素是否应被禁用
• readOnly - 设置或返回元素是否为只读
• required - 设置或返回元素是否为必填项

表单元素方法

• focus() - 使元素获得焦点
• blur() - 使元素失去焦点
• click() - 模拟元素上的点击
• select() - 选择元素的文本内容 (适用于文本输入)

验证相关属性和方法

• validity - 返回包含有效性状态的对象
• validationMessage - 返回验证消息
• willValidate - 返回元素是否将被验证
• checkValidity() - 检查元素的有效性
• setCustomValidity() - 设置自定义验证消息

示例代码

// 获取表单
const myForm = document.forms['myForm'];

// 访问表单元素
const username = myForm.elements['username'];

// 表单提交处理
myForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  
  if (myForm.checkValidity()) {
    // 表单验证通过，可以提交
    console.log('表单数据:', {
      username: username.value,
      // 其他字段...
    });
    
    // 可以手动提交
    // myForm.submit();
  } else {
    // 显示验证错误
    myForm.reportValidity();
  }
});

// 设置表单属性
myForm.method = 'POST';
myForm.action = '/submit';
myForm.noValidate = false;

// 操作表单元素
username.focus();
username.value = '默认值';
username.setCustomValidity(''); // 清除自定义验证消息

这些属性和方法使得 JavaScript 能够全面控制表单的行为和交互，实现复杂的表单验证和数据处理功能。