HTML5--表单新特性使用自定义错误提示消息validity属性

声明：本文为转载文章，原文传送门

一、HTML5表单新特性

这里由于不是本文的主要内容，所以就不详细介绍HTML5表单新特性，需要了解和学习的介意查看本人的另外一篇文章，里面有很详细的介绍关于HTML5的表单的新特性。

网址： http://blog.csdn.net/baidu_25343343/article/details/53140454

二、自定义错误是什么？

首先，HTML5的表单中有很多错误提示消息，类似于以下的几种情况:

还有很多这种错误的提示信息，就不一一列举了

这种错误的提示信息是系统写死的，如果自定义错误信息呢？？？？

所谓的自定义错误信息：指的是在提交表单时，如果输入框中的值不是我们想要的，抛出一个自定义的错误提醒。

三、如何自定义错误信息?

首先我们要了解HTML5为所有表单元素添加了一个JS属性：input.validity(有效性)

[html] view plain copy

1. <span style="font-size:24px;"><form action="">  
2.     用户名: <input type="text"   id="user"/><br/>  
3.     <input type="submit" value="提交"/>  
4. </form></span>  

我们给input添加一个id为user,在控制台输出user.validity查看该属性的内容：

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

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 

所以重点来了，我们怎么样自定义错误消息？

设置自定义错误消息的方法：

input.setCustomValidity('错误提示消息');

//这个相当于将input.validity.customError:true

 

取消自定义错误消息的方法：

input.setCustomValidity("");

//这个相当于将input.validity.customError:false

四、具体演示

[html] view plain copy

1. <span style="font-size:24px;"><form action="">  
2.     用户名: <input type="text"   id="user" required/><br/>  
3.     <input type="submit" value="提交"/>  
4. </form>  
5.   
6. <script>  
7.     var user =document.getElementById("user");  
8.     user.setCustomValidity("大哥！！！用户名必须填！！！");  
9. </script></span>  

如果要取消自定义消息，只要设置：

[html] view plain copy

1. <span style="font-size:24px;">user.setCustomValidity("");</span>  

本文为转载文章：原文传送门

感谢原作者！！！