在HTML5的世界中,表单验证已不再仅仅局限于简单的默认提示。通过利用setCustomValidity函数,我们可以自定义友好的提示信息,从而极大地提升用户体验。今天,我将为大家分享两个实例,展示如何在HTML5中结合setCustomValidity()函数实现验证表单。
实例一:
在以下的HTML页面中,我们有一个表单,其中包含密码输入和电子邮件输入。通过JavaScript,我们实现了自定义验证。如果密码输入不一致或者电子邮件格式不正确,我们将通过setCustomValidity设置自定义提示信息。
```html
使用JavaScript验证HTML5表单输入
function check(){
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var email = document.getElementById("email");
if (pass1.value != pass2.value) {
pass2.setCustomValidity("密码不一致");
} else {
pass2.setCustomValidity("");
}
if (!email.checkValidity()) {
email.setCustomValidity("请输入正确的email地址");
}
}
```
实例二:
在这个例子中,我们有一个简单的表单,其中包含一个文本输入框和一个提交按钮。当用户在文本输入框中输入时,我们会进行实时验证。如果输入不符合我们的预期(例如,不是四位数字),我们将通过setCustomValidity设置自定义提示信息。
```html
表单测试
function checkInput(i){
var v = i.validity;
if(true === v.valueMissing){ // 当输入为空时触发提示信息设置 默认为“请填写些字段”为中文验证的友好提示。可以通过setCustomValidity修改这个提示信息。默认为中文输入的时候可能会有中英文夹杂的问题。这时候可以在用户交互或者浏览器内部代码中确保内容的统一性即可。此外可以按需修改对应的验证逻辑以及错误提示内容等。此外其他错误类型也类似处理。具体的类型错误参考MDN文档等查阅更详细的内容。以此可以根据不同的输入类型设置不同的验证规则以及提示内容等。此外HTML5自带的验证功能已经非常强大,大部分常见的表单验证都可以实现,无需写额外的JS代码进行验证。但有时候为了用户体验等需求还是需要自定义一些额外的验证规则等。例如密码确认等场景就需要用户输入两次进行比对确保一致等场景的处理等。这里提供的例子仅为展示使用setCustomValidity的用法示例并非实际生产环境的代码参考。具体实现还需要根据实际需求进行定制开发处理。注意对于用户输入的合法性以及安全性等问题也需要考虑处理防止潜在的安全风险等问题发生。同时也要注意用户体验的优化以及交互的流畅性等用户体验相关的问题处理确保良好的用户体验等目标达成实现。另外需要注意对于用户输入的错误类型也需要进行详细的分类处理确保能够准确识别并给出相应的提示信息等处理方式等实现良好的用户体验和交互效果等目标达成实现。"请填写些字段"; // 当输入框为空时触发提示信息设置,默认提示为英文,这里我们设置为中文友好提示信息。"请输入数字的代码"; // 当输入框不符合四位数字的模式时触发提示信息设置,默认提示为英文,这里我们设置为中文友好提示信息。} else { i.setCustomValidity(""); } } ``` 以上就是关于在HTML5中结合setCustomValidity()函数实现验证表单的分享,希望大家喜欢并能够在实际项目中应用起来。注意在实际使用时需要考虑各种错误类型的处理以及用户体验的优化等问题。