在HTML5表单验证,自定义规则，用checkValidity()结合setCustomValidity()实现
<!DOCTYPE html>
<html>
<head>
<title>Custom Validation Example</title>
<script>
// 定义验证函数
function validateInput(event) {
// 获取输入框的值
var inputValue = event.target.value.trim();
// 设置自定义验证信息
if (inputValue.length === 0) {
// 如果输入为空，设置自定义错误信息
event.target.setCustomValidity('输入不能为空');
} else {
// 如果输入非空，则清除自定义错误信息
event.target.setCustomValidity('');
}
}
</script>
</head>
<body>
<form>
<label for="customInput">请输入内容:</label>
<input type="text" id="customInput" required oninput="validateInput(event)">
<button type="submit">提交</button>
</form>
</body>
</html>这段代码演示了如何在HTML5表单中实现自定义验证规则。当用户输入时，会触发oninput事件，然后调用validateInput函数进行验证。如果输入值为空或者只包含空白字符，则会调用setCustomValidity方法设置自定义的错误信息。如果输入非空，则清除错误信息，允许表单提交。
评论已关闭