JS表单验证

使用JS经行表单验证

表单验证通常由两个部分组成：

必填字段验证：确保必填的字段都被填写；

数据格式验证：确保所填内容的类型和格式是正确的、有效的。

使用JavaScript进行表单验证，一般包括以下几个方面：

1. 必填字段验证：确保必填的字段都被填写

这可以通过在提交表单之前检查字段是否为空来实现。例如，可以使用JavaScript获取表单元素的值，并检查其是否为空字符串。如果字段为空，则可以显示错误消息，提示用户填写必填字段。

示例代码：

function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var email = document.forms["myForm"]["email"].value;
  if (name === "") {
    alert("请填写姓名");
    return false;
  }
  if (email === "") {
    alert("请填写邮箱");
    return false;
  }
}

在上述示例中，我们首先获取了姓名和邮箱的输入值，并检查它们是否为空。如果为空，则使用alert函数弹出错误消息，并返回false以阻止表单提交。

2. 数据格式验证：确保所填内容的类型和格式是正确的、有效的

数据格式验证可以使用正则表达式来匹配特定的模式。例如，可以使用正则表达式验证电子邮件的格式是否符合要求。

示例代码：

function validateForm() {
  var email = document.forms["myForm"]["email"].value;
vare mailPattern=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (!email.match(emailPattern)) {
    alert("邮箱格式不正确");
    return false;
  }
}

在上述示例中，我们定义了一个emailPattern正则表达式来验证电子邮件的格式。然后，使用match函数检查输入的邮箱是否与该模式匹配。如果不匹配，则显示错误消息并返回false。

通过对必填字段进行验证和对数据格式进行验证，可以确保用户提交的表单数据是有效、合法的。请根据实际需求和验证规则进行适当的调整和扩展。

3.HTML约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）HTML约束验证是指基于HTML输入属性、CSS伪类选择器和DOM属性和方法，浏览器在表单提交时使用的一种验证算法。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML约束验证主要涉及以下几个方面：

HTML输入属性：HTML表单元素的输入属性规定了元素接受哪些类型的输入。例如，required属性规定输入元素是必需的；max和min属性规定输入元素的最大值和最小值；pattern属性规定输入元素的值的模式等。

CSS伪类选择器：HTML约束验证还可以使用CSS伪类选择器对表单元素进行样式控制。例如，:invalid选择器用来选取无效的输入元素，:required选择器用来选取必需的输入元素，:disabled选择器用来选取禁用的输入元素等。

DOM属性和方法：HTML约束验证还可以使用JavaScript操作DOM属性和方法。例如，checkValidity()方法可以检查表单元素的有效性；setCustomValidity()方法可以设置自定义错误消息；willValidate属性返回一个布尔值，表示是否需要执行有效性检查等。