什么是HTML5的自定义验证消息
HTML5中的自定义验证消息是一种在表单验证失败时显示自定义错误消息的方法。具体来说，它可以帮助我们在表单提交之前验证用户输入，以确保输入的数据符合我们的期望，并显示有意义的错误信息来帮助用户纠正输入错误。这个特性相比于直接使用浏览器默认的验证消息，有着更好的用户体验和更强的可定制性。
必需属性与HTML5验证
在HTML5中，表单验证有两种方式：一是使用默认的HTML5验证，即标签属性required，二是使用自定义验证，即使用自定义的validationMessage来替换默认的验证消息。
使用必需属性
required是在HTML5中引入的一个表单属性。当一个表单元素添加了该属性时，在提交表单之前，浏览器会自动检查该元素是否有值。如果该元素没有值，浏览器会阻止表单的提交，并显示一个默认提示消息。
const form = document.querySelector('form');
const input = form.querySelector('input');
input.addEventListener('invalid', function(e){
e.preventDefault();
if(!input.validity.valueMissing){
return;
}
input.setCustomValidity('请输入必填项');
});
input.addEventListener('input', function(e){
e.preventDefault();
input.setCustomValidity('');
});
上述代码使用了<input>元素的事件invalid和input，并在事件函数中设置错误消息，用于替换默认的验证消息。
使用自定义验证消息
自定义验证消息是一种更细致、更灵活的验证方法。它可以让开发人员定制验证规则和验证提示信息，从而更好地指导用户正确输入，并提高用户的体验感。
首先，我们需要先添加一个pattern属性，用于指定该表单元素应该输入的格式。
<input type='text' pattern='^[a-zA-Z0-9]+$' />然后，在JavaScript中添加以下代码来自定义验证消息：
const input = document.querySelector('input');
input.addEventListener('invalid', function(e){
e.preventDefault();
if(input.validity.patternMismatch){
input.setCustomValidity('输入不符合要求，请输入字母或数字');
}else{
input.setCustomValidity('');
}
});
上述代码向<input>元素添加了事件监听器，并在事件函数中指定了自定义的验证消息。当用户的输入不符合指定的正则表达式时，就会显示我们自定义的错误提示。
使用CSS美化验证消息
在使用自定义验证规则的同时，我们还可以结合CSS来进一步美化验证消息，以达到更好的用户体验。
使用CSS美化验证消息的方法非常简单，我们只需要在<style>标签或外部CSS文件中，添加以下的CSS代码：
input:invalid{
border: 1px solid red;
}
input:valid{
border: none;
}
上述代码中，我们使用:valid和:invalid选择器来分别处理表单验证通过和验证失败的情况。此外，我们还使用了border属性来指定边框样式。这样，当用户输入不符合验证规则时，错误消息就会和input元素绑定一起，并引导用户及时修正错误。
总结
在HTML5中，自定义验证消息提供了一种对用户更友好，更可定制的表单验证方式。通过使用自定义验证消息，我们可以更好地约束用户的输入行为，从而提高网站的整体安全性。同时，我们还可以通过CSS来美化验证消息，以增强用户体验。