javascript基础学习系列四百八十一:HTML5 约束验证 API
// 假设我们有一个简单的表单,包含一个输入框和一个提交按钮
// 输入框使用了HTML5的"email"类型,以及自定义的"constraints"属性
// 提交按钮使用了"formnovalidate"属性来允许无验证的提交
// 获取表单元素
var form = document.getElementById('myForm');
var input = document.getElementById('myInput');
var submitBtn = document.getElementById('mySubmitBtn');
var submitNoValidateBtn = document.getElementById('mySubmitNoValidateBtn');
// 检查浏览器是否支持HTML5的约束验证API
if (input.validity) {
// 为输入框的验证事件绑定处理函数
input.addEventListener('invalid', function(event) {
// 检查具体的验证类型
if (input.validity.typeMismatch) {
// 设置自定义的错误提示
this.setCustomValidity('请输入有效的电子邮件地址。');
} else if (input.validity.valueMissing) {
// 设置自定义的错误提示
this.setCustomValidity('电子邮件地址不能为空。');
} else {
// 没有其他验证错误,清除自定义错误提示
this.setCustomValidity('');
}
});
}
// 提交按钮的点击事件处理函数
function handleSubmit(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 检查表单是否通过验证
if (form.checkValidity()) {
// 表单验证通过,执行提交操作
alert('表单验证通过,数据将被提交。');
// form.submit();
} else {
// 表单验证失败,执行错误处理
alert('表单验证失败,请检查输入的数据。');
}
}
// 绑定事件处理器到提交按钮
submitBtn.addEventListener('click', handleSubmit);
// 绑定事件处理器到无验证提交按钮
submitNoValidateBtn.addEventListener('click', function(event) {
event.preventDefault();
alert('提交数据,不进行验证。');
// form.submit();
});
这段代码演示了如何使用HTML5约束验证API来对表单输入进行验证,并如何使用JavaScript来自定义错误提示信息。同时,代码中还展示了如何分别处理正常提交和无验证提交的情况。
评论已关闭