客户端表单验证
新表单元素及属性的一大优点就是用户输人数据更加便捷(举例来说，直接在日历中选择日期)，另一个伟大的进步是发送表单前，用户可以选择验证表单内容，并获得错误提示。你可能会说这种验证功能已经出现了很多年了，没什么新意。这个说法也是对的，但是至今这一功能都需要通过编写额外的JavaScript代码来实现，即使jQuery及类似的库让这个任务变得更轻松、代码也更容易管理，但你仍需要用到一个扩展库。
在HTML5中，这一情况从根本上得到了改变：只要使用HTML代码为输入字段定义好参数，浏览器就会自动检査这一字段是否被正确填写。这是一个相当大的进步，它省略了冗长的〗avaScript代码。以这个小例子为证：
〈formmethod=getaction=required.html〉
〈pxlabel〉Youre-mailaddress:
〈inputtype=emailname=emailrequiredx/label〉
〈pxinputtype=submit〉
宁波网站建设认为〈/form〉
展示了在你提交表单前没有输入一个e-mail地址的情况下将看到的结果。Opera会显示这样的错误信息：Thisisarequiredfield。若你的Opera用户界面使用的是其他语言，这条错误信息也会以相关语言显示。当然，你也可以使用JavaScript来创建这些错误提示，关于这点我们会在节中讨论。
还不止如此：因此输入字段被定义为email类型，因此当你输入一个无效e-mail地址时，Opera同样会显示一^错误信息------例如Pleaseenteravalidemailaddress。
GoogleChrome及Safari等包含WebKit的浏览器目前能够支持这个功能中的有效性验证部分，但不会显示错误信息。它们会为无效输人字段添加一个框，并将光标置于输人框内，这样至少你能知道这里有些不对劲。
虽然客户端表单输入验证很让人欢欣鼓舞.但别忘了它并不能取代服务器端控制。
一个潜在黑客可以依靠非常简单的技术手段绕开这些设置。
invalid事件
在表单验证过程中，元素的内容无效将触发invalid事件。我们可以用此事件来对错误的值进行单独处理：
window.onload=function(){
varinputs=document.getElementsByTagName("input");for(vari=0；i〈inputs.length;i++){in$uts[i].addEventListener("invaiidM,function(){alert("Field"+this.labels[0].innerHTML+uisinvalid");this.style.border='dotted2pxred';},false);
载人页面后，将生成一个包含所有input元素的列表。每个元素中都添加了一个事件监听器，用来处理错误。在我们的例子中，它表现为打开一个警告窗，input元素被红色虚线标记，警告窗中会显示input元素的label文本。
这-方法在拥有多个输入字段的表单中并不理想。用户必须单击每个错误信息的OK按钮，然后找到表单中的对应字段，重新进行输入。有时候对用户来说在错误输人的同时便得到错误提示更有用。我们将在下一节中尝试这个方法。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
