JavaScript 提供了多种内置的 API，可以帮助开发者实现更强大的表单验证功能。以下是一些常用的 JavaScript 验证 API，它们通常用于验证用户输入的数据是否符合特定要求。
1. HTMLFormElement.checkValidity()
checkValidity() 方法用于检查表单中所有输入字段的有效性，返回一个布尔值，指示表单是否有效。它会检查每个表单元素的 required 属性、pattern 属性以及其他 HTML5 验证特性。
示例：
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="age">Age:</label>
<input type="number" id="age" name="age" required />
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById("myForm");
form.onsubmit = function(event) {
event.preventDefault();
if (!form.checkValidity()) {
alert("Please fill out the form correctly.");
} else {
alert("Form is valid!");
}
};
</script>在这个例子中，checkValidity() 会检查表单中的每个字段是否符合其约定的规则（例如，required 属性）。如果表单无效，页面会提示用户填写正确的内容。
2. HTMLInputElement.setCustomValidity()
setCustomValidity() 方法允许你为输入元素设置一个自定义的验证消息。你可以通过这种方式设置一些额外的验证规则，并提供自定义的错误信息。
示例：
<form id="myForm">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Submit" />
</form>
<script>
var passwordInput = document.getElementById("password");
passwordInput.oninput = function() {
if (passwordInput.value.length < 6) {
passwordInput.setCustomValidity("Password must be at least 6 characters long.");
} else {
passwordInput.setCustomValidity("");
}
};
document.getElementById("myForm").onsubmit = function(event) {
event.preventDefault();
if (passwordInput.checkValidity()) {
alert("Form is valid!");
} else {
alert("Password is invalid!");
}
};
</script>在此示例中，如果密码长度小于 6 个字符，setCustomValidity() 会设置一个自定义的错误消息，提示用户输入更长的密码。
3. HTMLInputElement.reportValidity()
reportValidity() 方法会触发浏览器的默认验证行为，并显示错误消息。它与 checkValidity() 方法类似，但 reportValidity() 会自动展示验证失败的消息，而 checkValidity() 仅返回一个布尔值。
示例：
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById("myForm");
form.onsubmit = function(event) {
event.preventDefault();
if (!form.reportValidity()) {
alert("Form contains errors.");
} else {
alert("Form submitted successfully.");
}
};
</script>在这个例子中，reportValidity() 方法会自动检查表单并显示所有验证错误，用户可以看到详细的错误提示。
4. Pattern 属性
HTML5 提供了 pattern 属性，它允许你通过正则表达式为表单输入字段设置验证规则。用户输入的内容将会与正则表达式进行匹配。如果匹配失败，表单将无法提交。
示例：
<form id="myForm">
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" pattern="\d{10}" required />
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById("myForm");
form.onsubmit = function(event) {
event.preventDefault();
if (!form.checkValidity()) {
alert("Please enter a valid phone number (10 digits).");
} else {
alert("Form is valid!");
}
};
</script>在这个例子中，pattern="\d{10}" 指定了一个正则表达式，要求用户输入一个 10 位的数字作为电话号码。
5. Constraint Validation API
HTML5 的表单验证也包含了一个 约束验证 API，它通过表单元素的 validity 属性来报告每个字段的验证状态。你可以使用这些属性来检查字段的有效性。
示例：
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<input type="submit" value="Submit" />
</form>
<script>
var emailInput = document.getElementById("email");
emailInput.onblur = function() {
if (!emailInput.validity.valid) {
alert("Please enter a valid email address.");
}
};
document.getElementById("myForm").onsubmit = function(event) {
event.preventDefault();
if (emailInput.validity.valid) {
alert("Form is valid!");
} else {
alert("Please fix the errors in the form.");
}
};
</script>在这个例子中，我们使用 validity 属性来检查 email 输入字段的有效性。如果用户输入了无效的电子邮件地址，会显示提示消息。
总结
JavaScript 验证 API 为前端开发提供了强大的表单验证工具。常见的验证方法包括：
- 使用
checkValidity()和reportValidity()来检查表单的有效性。 - 使用
setCustomValidity()设置自定义的错误消息。 - 利用 HTML5 的
pattern属性进行正则表达式验证。 - 使用
validity属性获取字段的验证状态。
这些工具可以帮助你确保用户输入的数据符合预期规则，从而提高用户体验并减少错误数据的提交。更多详细内容请关注其他相关文章。