如何验证 HTML 表单中的输入字段？

在 HTML 表单中，为了保证输入的数据合法性和准确性，需要对用户输入的数据进行验证。本文将介绍 HTML 表单字段的常用验证方法。

HTML 表单验证

HTML 提供了一些基本的验证方法。常用的验证属性包括 required、pattern、min、max、step 等。这些属性可应用于各种表单字段，如文本框、下拉框、单选框、复选框等。

required 属性

required 属性用于表示该字段为必填字段，如下所示：

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

若用户未在该字段中输入任何内容就提交表单，则会弹出浏览器的默认提示信息，告知用户必须填写此字段才能提交表单。

其他验证属性的使用方法也类似，下面将分别介绍。

pattern 属性

pattern 属性用正则表达式来限定用户输入的格式。例如：

<input type="text" name="birthday" pattern="\d{4}-\d{2}-\d{2}" placeholder="YYYY-MM-DD" required>

此代码片段中，pattern 属性值 \d{4}-\d{2}-\d{2} 表示该文本框只能输入符合“YYYY-MM-DD”格式的数字。placeholder 属性用于显示提示信息。

min 和 max 属性

对于数值类型的表单字段，可以使用 min 和 max 属性限定其取值范围。例如：

<input type="number" name="age" min="0" max="150" required>

此代码片段中，age 必须是介于 0 到 150 之间的数值。若用户输入的数值不在其范围内，则会弹出浏览器的默认提示信息。

step 属性

step 属性用于限制用户输入数值的步进值。例如：

<input type="number" name="volume" min="0" max="100" step="10" required>

此代码片段中，volume 必须是 0, 10, 20, … 100 中的某一数值。若用户输入的数值不符合该规则，则会弹出浏览器的默认提示信息。

JavaScript 表单验证

HTML 表单验证只能进行基本验证，当需要进行更复杂的验证时，可以使用 JavaScript。JavaScript 可以通过正则表达式、方法等实现更为灵活的验证方式。

实现表单验证

在 HTML 中调用 JavaScript 验证方法的方式通常有两种：

1. 采用标准的事件处理程序，如 onclick、onsubmit 等。
2. 在表单元素中添加 onblur、onchange 等属性。

下面以第一种方式为例，介绍如何实现表单验证。

<form name="myForm" onsubmit="return validateForm()" method="post">
  <label>用户名：</label><input type="text" name="username"><br>
  <label>密码：</label><input type="password" name="password"><br>
  <input type="submit" value="提交">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["username"].value;
  if (x == "") {
    alert("用户名不能为空");
    return false;
  }
  var y = document.forms["myForm"]["password"].value;
  if (y == "") {
    alert("密码不能为空");
    return false;
  }
}
</script>

此代码片段中，当用户点击提交按钮时，会调用 validateForm() 方法进行表单验证。如果验证不通过，则会弹出相应的提示信息并阻止表单提交。

正则表达式验证

具体的表单验证方法需要根据具体业务场景而定。以手机号码验证为例，其 JavaScript 代码如下：

function validatePhone() {
  var phoneNum = document.forms["myForm"]["phone"].value;
  var reg = /^1[3-9]\d{9}$/;
  if (!reg.test(phoneNum)) {
    alert("请输入正确的手机号码");
    return false;
  }
  return true;
}

此代码片段中，/^1[3-9]\d{9}$/ 表示手机号码必须以数字 1 开头，然后是 3 到 9 的任意数字，最后再加 9 个数字。test() 方法用于判断字符串是否符合正则表达式要求。

总结

表单验证是 Web 开发中不可或缺的部分，对于表单字段的验证，HTML 表单的基本验证属性已经可以满足大多数的需求。但当我们需要更为复杂的验证时，JavaScript 的正则表达式和方法是很好的选择。在实际项目中，我们需要根据不同的业务场景，灵活选用合适的表单验证方法。