HTML5的表单验证功能,

　　HTML5对表单的优化程度很大，无论是语义、小部件，还是数据格式验证。我猜你肯定会以浏览器兼容为借口不愿意使用这些“新功能”，但这绝不应该成为让你停滞不前的理由。此外，还有像Modernizr和ployfill这样的工具库来帮助你在不支持Html5的浏览器上回滚。当你真正尝试使用这些表单的新功能时，我保证你会爱上它。如果唯一的瑕疵就是提示框的样式是浏览器默认的，你又无法更改的话，那么，如果你相信浏览器厂商的设计师的审美水平(我相信他们的设计水平比大多数普通人要好，如果不考虑样式兼容性的话)，那就赶紧学起来吧！

　　原生验证

　　input type

　　HTML5为数据格式验证提供了许多原生支持，例如：

　　input= email /当你点击提交按钮时，如果你输入的格式与邮件不符，会导致提交失败，浏览器会提示错误信息。

　　例如，在chrome下：

　　注意：

　　1.只有当您提交时，才会触发浏览器的验证。

　　2.不同浏览器的提示信息的行为风格是不同的。

　　3.当有多个输入不符合要求时，只会提示一个错误。通常，表单中较早的输入会被提示。

　　不要想当然地认为，当输入的类型等于tel时，如果不输入电话号码格式，提交时会被浏览器屏蔽并提示错误信息。type=tel 只在PC端起语义作用，移动端生成的键盘可以是纯数字键盘，但不能起到数据验证的作用。

　　pattern

　　您可以使用pattern属性为浏览器不提供本机验证的数据格式设置自定义格式验证。模式属性的值是一个正则表达式(字符串):

　　输入type= tel pattern=[0-9]{ 11 } title=请输入一个11位数字的电话号码。当您单击提交时，如果您输入的数据不符合模式中的常规格式，浏览器将阻止表单提交并提示：“请保持格式与请求的格式一致”。标题中的内容(小字)。但是，请注意，当文本框中的内容为空时，浏览器不会检查它，而是直接提交表单(因为浏览器认为这个框不是必需的)。如果您希望此框包含内容，请添加必需的属性。

　　通过HTML的原生验证系统，基本可以满足表单提交的限制。但是HTML5提供了更高级的功能，方便我们开发和增强用户体验。

　　约束验证API

　　默认提示信息

　　类似“请遵循所请求的格式”的浏览器提示消息字符串隐藏在输入DOM对象的validationMessage属性中。该属性在大多数现代浏览器中是只读的，也就是说，它不能被修改，例如下面的代码：

　　input= text required id= input /提交时，如果输入内容为空，那么浏览器会提示请填写此字段，我们可以在控制台打印这句话：

　　var=document . getelementbyid( input )input.validationMessage//=请填写此字段。如果要修改内容，可以调用setCustomValidity接口来更改validationMessage的值。

　　Input.setCustomValidity(必须填写此字段)；//下面的做法适用于不支持setCustomValidity的浏览器，基本的现代浏览器都不支持setCustomValidity。input.validationMessage=必须填写此字段。请注意，像required这样的HTML原生验证可以更改其中的信息，但不能将信息设置为空字符串，原因如下所述。

　　原理

　　HTML表单验证系统通过validationMessage属性检测该文本框中的数据是否经过验证。如果它的值是空字符串，则意味着它被验证；否则，就意味着它不是，浏览器会以错误消息的形式提示用户它的值。因此，在本机验证期间，用户不能将validationMessage的值设置为空字符串。

　　约束验证API的简单实例

　　验证API是一个比本地方法更灵活的表达式。可以自己设置数据是否通过，不需要借助正则表达式。原理很简单。通过if判断，如果数据格式满足你，那么你调用setCustomValidity使validationMessage的值为null。否则，调用setCustomValidity传入一条错误消息：

　　Input.addeventlistener (input ，function(){ if(this . value . length 3){//判断条件完全是用户自定义的input.setCustomValidity(格式不正确)；} else { input . setcustomvalidity()} })；每次键盘输入，代码都会判断格式是否正确，然后调用setCustomValidity来设置validationMessage的值。不要幻想每次按键的时候，浏览器都会提示你结果是否正确。当您单击“提交”按钮时，浏览器只会在validationMessage中提示该值(如果有)。

　　如果你还没想好，你肯定会问，既然这样，为什么要绑定键盘事件进行输入，每次输入都要做一个判断？直接为表单绑定提交事件，提交时再判断有多好。不要担心，这样做是有益的。

　　随着输入判断格式与样式

　　作为用户，我们当然希望文本框在得知我输入了错误的格式后变成红色(或者有其他提示)。而且我每输入一个字符，如果正确，文本框就会恢复正常。我们可以使用CSS伪类来实现这个功能：

　　input:必选{ background-color:# FFE 14d；}/*这个伪类由validationMessage属性判断*/input:invalid { border:2px solidred；}上面的必需伪类将为所有必需的但为空的输入提供黄色背景，而下面的无效伪类将为所有未通过验证的输入添加2px红色边缘。现在让我们将输入类添加到我们的输入框中。

　　这些伪类的判断条件和浏览器判断你是否可以提交表单是一样的。查看validationMessage中的值。所以我们设置每一个键盘输入事件都会触发一个判断来改变CSS伪类的渲染。这就是意图。

　　更好的用户体验

　　另一个缺点是，当输入设置为required时，在初始化期间，无效的伪类将对其进行操作，因为它是空的。这不是我们想看到的，因为我们还什么都没做。

　　我们可以添加父选择器。在这些伪类之前无效，这样这些伪类只有在父元素有无效类的情况下才起作用。可以设置一个提交事件，在表单提交验证失败后触发输入无效事件，将无效类添加到表单中：

　　Form.addEventListener(invalid ，function(){ this . class name= invalid }，true)因为invalid是Input的事件，而不是Form的事件，这里我们将第三个参数设置为true以事件捕获的方式进行处理。这样，就大功告成了。

　　最终实例

　　好了，现在是时候总结我们所学的知识并创建最佳实践了：

　　！DOCTYPE html html lang= en head meta charset= UTF-8 title form/title style input:必选{ background-color:# DCD4CE；} .无效输入：无效{ border: 2px纯红；}/style/head body form id= form label email:input type= email required id= email /label label id card:input required id= id card /label input type= submit id= submit /form script var email=document . getelementbyid( email )；var id card=document . getelementbyid( id card )；var form=document . getelementbyid( form )；IDCard.addEventListener(input ，function(){ if(this . value . length！=6) {this.setcustomvalidity(身份证长度必须为6 )} else { this . setcustomvalidity()})；form.addEventListener(invalid ，function(){ this . class name= invalid )；}，true)/script/body/html运行后截图如下：

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。