HTML5表单的自动验证、取消验证、自定义错误信息
HTML5表单的自动验证功能可以通过为输入字段添加required、pattern等属性来启用，并且可以通过设置novalidate属性来取消验证。自定义错误信息可以通过setCustomValidity方法来设置。
以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Form Validation Example</title>
<script>
function validateForm() {
var email = document.getElementById('email').value;
if (!email.includes('@')) {
// 自定义错误信息
document.getElementById('email').setCustomValidity('请输入有效的邮箱地址');
} else {
// 输入合法时，清除自定义错误信息
document.getElementById('email').setCustomValidity('');
}
}
</script>
</head>
<body>
<form action="/submit" method="post" oninput="validateForm()">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<input type="submit">
</form>
</body>
</html>在这个例子中，我们定义了一个简单的邮箱验证函数validateForm，它会在用户输入时触发。如果输入的邮箱不包含@，它会通过setCustomValidity设置一个自定义错误信息。如果输入是合法的，则清除错误信息。表单的oninput事件确保了每当有输入时都会触发验证函数。
评论已关闭