有如下HTML结构:
<form action="ok.html"> <input type="text" pattern="\d{1,3}" required
id="myinput"> <p> <input type="submit" value="提交"> </p> </form>
当提交的信息出错的时候,默认的HTML5提示是:

“请填写此字段”  --  没有填写内容,违反了 required “必填”要求

“请匹配要求的格式”  -- 内容不合法,违反了 pattern 的正则要求。

如何修改错误提示信息呢?

HTML5为所有表单元素添加了一个JS属性:input.validity      “有效,合法性” ,并且添加了个事件 invalid
“出错事件,内容无效事件”。

注:不同于 onerror事件,onerror 事件会在文档或图像加载过程中发生错误时被触发。

我们可以利用input标签的invalid事件,输出  input.validity 看看。
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // input标签 console.info(tag.validity); } // invalid
输入内容错误事件。包括,为空,格式错误等 myinput.addEventListener("invalid" ,invalidFun,false);

valid: false  //当前输入是否有效

badInput: false  //输入无效,如number框输入abc

patternMismatch: false //正则表达式验证失败

rangeOverflow:  false //输入值超过max的限定

rangeUnderflow: false //输入值小于min的限定

tooLong : false //输入的字符数超过maxlength

tooShort :   false //输入的字符数小于minlength

stepMismatch : false //输入的数字不符合step限制

typeMismatch : false //输入值不符合email、url的验证

valueMissing : false //未输入值,违反了required要求

customError :  false //是否存在自定义错误

上述属性值的特性:
  
(1)只要有一个验证方面错误,某个属性就为true,valid值为false
  
(2)只有没有任何验证错误,所有的属性都为false,valid才能为true
 
 (3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息
 
 (4)所有的错误消息中,只要存在“自定义的错误消息”,浏览器只显示自定义的错误消息,优先级高于浏览器预定义的错误消息
 
 (5)当前没有自定义错误消息,所以customError :  false 

如果要自定义错误信息,可以判断错误的类型:
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // 标签 console.info(tag.validity); if(
tag.validity.valueMissing ){ myinput.setCustomValidity("内容必须要填哦"); }else if(
tag.validity.patternMismatch ){ myinput.setCustomValidity("格式不正确!请输入合法的三位数。");
}else{ myinput.setCustomValidity("其他错误"); } } // invalid 输入内容错误事件。包括,为空,格式错误等
myinput.addEventListener("invalid" ,invalidFun,false);
设置自定义错误消息的方法:
input.setCustomValidity('错误提示消息');  //这个相当于将input.validity.customError:true

但是,当表单元素没有错误的时候,需要取消自定义错误消息,否则表单无法提交:
input.setCustomValidity("");     //这个相当于将input.validity.customError:false
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // 标签 console.info(tag.validity); if(
tag.validity.valueMissing ){ myinput.setCustomValidity("内容必须要填哦"); }else if(
tag.validity.patternMismatch ){ myinput.setCustomValidity("格式不正确!请输入合法的三位数。");
}else{ myinput.setCustomValidity("其他错误"); } } // invalid 输入内容错误事件。包括,为空,格式错误等
myinput.addEventListener("invalid" ,invalidFun,false); //
输入的时候没有错误了,就要取消自定义错误提示,否则无法提交表单 function validFun(e){ var tag = e.target ; //
标签 console.info(tag.validity); myinput.setCustomValidity(""); }
myinput.addEventListener("input" ,validFun,false);
表单提交后,发生事件顺序如下:
(1)submit按钮的click事件,若取消默认事件,则终止
(2)html5表单验证和提示,若表单验证不通过,则提示第一个不合法输入,并终止
(3)form表单的submit事件,若取消默认事件,则终止

所以,可以看到HTML5自带的验证,发生在表单的onsubmit事件之前。

 

技术
©2019-2020 Toolsou All rights reserved,
Redis的bind的误区十六进制转换成整型和浮点型84行代码实现俄罗斯方块启发式杀毒——新趋势JAVA学习中的一点小发现:LinkedList中.poll()方法在输出时使用应注意的小点画统计图表Bugku 逆向题(持续更新)中国脑计划颠覆性创新之路六,用互联网与脑科学构建新AI系统模型关于服务发现和负载均衡,你想知道的都在这儿Linux bonding网卡与其slave共同使用