HTML5的表单事件与API

HTML5为表单带来了许多新的事件和API，极大地提升了表单的交互性和功能性。从实时验证到动态内容控制，这些特性让开发者能够更灵活地处理用户输入和数据提交。

表单事件

HTML5引入了一系列新的事件，专门用于处理表单元素的交互。这些事件可以监听用户输入、验证状态变化等行为。

input 事件

input事件在表单元素的值发生变化时触发，适用于<input>、<textarea>和<select>元素。与change事件不同，input事件在每次值变化时都会触发，而不是等到元素失去焦点。

document.getElementById('username').addEventListener('input', function(e) {
  console.log('当前输入值:', e.target.value);
});

invalid 事件

当表单元素的值未通过验证时触发invalid事件。可以结合HTML5的内置验证功能使用。

document.getElementById('email').addEventListener('invalid', function(e) {
  e.preventDefault(); // 阻止默认错误提示
  this.setCustomValidity('请输入有效的邮箱地址');
});

change 事件

change事件在表单元素的值发生变化且失去焦点后触发。对于<input type="checkbox">和<input type="radio">，选中状态改变时立即触发。

document.getElementById('subscribe').addEventListener('change', function(e) {
  console.log('订阅状态:', e.target.checked);
});

表单验证API

HTML5提供了一套完整的客户端表单验证API，无需JavaScript即可实现基本验证，同时也提供了更高级的定制选项。

checkValidity()方法

检查表单元素是否通过验证，返回布尔值。

const form = document.getElementById('myForm');
if (form.checkValidity()) {
  // 表单验证通过
} else {
  // 表单验证失败
}

setCustomValidity()方法

设置自定义验证消息，当验证失败时显示。

const password = document.getElementById('password');
password.addEventListener('input', function() {
  if (this.value.length < 8) {
    this.setCustomValidity('密码长度至少8个字符');
  } else {
    this.setCustomValidity('');
  }
});

validity 属性

返回一个ValidityState对象，包含详细的验证状态信息。

const email = document.getElementById('email');
console.log(email.validity);
/*
{
  valueMissing: false,
  typeMismatch: true,
  patternMismatch: false,
  tooLong: false,
  tooShort: false,
  rangeUnderflow: false,
  rangeOverflow: false,
  stepMismatch: false,
  badInput: false,
  customError: false,
  valid: false
}
*/

新的表单元素和属性

HTML5新增了多个表单元素和属性，增强了表单的功能性。

datalist 元素

提供输入建议列表，用户可以选择或自行输入。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

output 元素

用于显示计算结果或脚本输出。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="25"> =
  <output name="result" for="a b">75</output>
</form>

表单数据API

FormData 对象

方便地收集和管理表单数据，特别适合AJAX提交。

const form = document.getElementById('myForm');
const formData = new FormData(form);

// 添加额外数据
formData.append('timestamp', Date.now());

// 发送数据
fetch('/submit', {
  method: 'POST',
  body: formData
});

entries() 方法

遍历FormData中的键值对。

for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

文件上传API

HTML5增强了文件上传功能，提供了更精细的控制。

multiple 属性

允许选择多个文件。

<input type="file" id="fileUpload" multiple>

File API

访问文件信息并预览内容。

document.getElementById('fileUpload').addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    console.log(`文件名: ${files[i].name}, 大小: ${files[i].size}字节`);
    
    // 图片预览
    if (files[i].type.match('image.*')) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        document.body.appendChild(img);
      };
      reader.readAsDataURL(files[i]);
    }
  }
});

日期和时间输入

HTML5新增了专门的日期时间输入类型，浏览器会提供原生控件。

<input type="date" id="birthday">
<input type="time" id="alarm">
<input type="datetime-local" id="meeting">
<input type="month" id="month">
<input type="week" id="week">

document.getElementById('birthday').addEventListener('change', function(e) {
  console.log('选择的日期:', e.target.valueAsDate);
});

颜色选择器

color类型的输入元素提供原生颜色选择器。

<input type="color" id="bgColor" value="#ff0000">

document.getElementById('bgColor').addEventListener('input', function(e) {
  document.body.style.backgroundColor = e.target.value;
});

进度条和计量器

progress 元素

显示任务完成进度。

<progress id="fileProgress" value="0" max="100"></progress>

// 模拟文件上传进度
let progress = 0;
const interval = setInterval(() => {
  progress += 5;
  document.getElementById('fileProgress').value = progress;
  if (progress >= 100) clearInterval(interval);
}, 500);

meter 元素

显示标量测量值或分数值。

<meter id="diskUsage" value="6" min="0" max="10">6 out of 10</meter>

表单约束验证

HTML5提供了多种方式来约束用户输入。

pattern 属性

使用正则表达式验证输入。

<input type="text" id="zipCode" pattern="\d{5}" title="五位邮政编码">

required 属性

标记必填字段。

<input type="text" id="username" required>

min, max 和 step 属性

限制数值输入的范围和步长。

<input type="number" id="quantity" min="1" max="10" step="1">
<input type="range" id="volume" min="0" max="100" step="5">

表单自动完成

HTML5改进了表单的自动完成功能。

autocomplete 属性

控制表单的自动填充行为。

<form autocomplete="on">
  <input type="text" name="name" autocomplete="name">
  <input type="email" name="email" autocomplete="email">
  <input type="password" name="password" autocomplete="new-password">
</form>

表单与Web存储

结合Web Storage API保存表单数据。

// 保存表单数据
document.getElementById('myForm').addEventListener('input', function() {
  const formData = new FormData(this);
  localStorage.setItem('formAutoSave', JSON.stringify(Object.fromEntries(formData)));
});

// 恢复表单数据
window.addEventListener('load', function() {
  const savedData = localStorage.getItem('formAutoSave');
  if (savedData) {
    const data = JSON.parse(savedData);
    for (const [name, value] of Object.entries(data)) {
      const element = document.querySelector(`[name="${name}"]`);
      if (element) element.value = value;
    }
  }
});

表单与Web Workers

使用Web Workers处理表单数据，避免阻塞UI线程。

// 主线程
const worker = new Worker('form-worker.js');
document.getElementById('processData').addEventListener('click', function() {
  const formData = new FormData(document.getElementById('dataForm'));
  worker.postMessage(Object.fromEntries(formData));
});

worker.onmessage = function(e) {
  document.getElementById('result').textContent = e.data;
};

// form-worker.js
self.onmessage = function(e) {
  // 模拟耗时处理
  const result = doComplexCalculation(e.data);
  self.postMessage(result);
};

function doComplexCalculation(data) {
  // 复杂计算逻辑
  return '处理结果';
}