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来自定义错误提示信息。同时，代码中还展示了如何分别处理正常提交和无验证提交的情况。