checkValidity函数
要在输入元素时即时验证有效性，
宁波网站建设需要用到checkValidity函数。但你也可以按正常流程，在表单提交时“手动”确认：
〈inputtype=emailname=email
onchange="thischeckValidity();M〉
当你输人了一个无效e-mail地址并从该输入字段离开时(用Tab键或单击了浏览器的其他位置)，浏览器(目前来说至少包括Opera)将马上反馈一个错误信息。若我们向所有输入元素的onchange事件添加一个检査输入的功能，错误处理机制将变得更好：
window.onload=function(){
varinputs=document.getElementsByTagName("input'*);for(vari=0;i〈inputs.length:i++;{if(!inputs[i].willValidate){continue;inputs[i].onchange=function(){if(!this.checl〈Validity()){this.style.border='solid2pxred';this.style.background=1}else{this.style.border=1this.style.background='lightgreen';
〉}
这是个常见的遍历循环：获取所有输人元素，首先检查第一个元素是否有效，若willValidate没有反馈一个trae值，循环将继续跳至下一个元素。否则，onchange事件将会绑定一个匿名函数，而这个匿名函数将会调用checkValidity函数。若元素被检査为无效，该元素将显示为红色边框，若有效，则其背景显示为浅绿色。记彳辱在用户改正了错误输入后，重置background及border为空白字符串，这样浏览器才能将背景色及边框重置为默认值。
你可以看到checkValidity功能是如何为一个错误的时间输人生成错误信息的。
若你想进一步提升错误处理流程的交互性，可以用HTML5的oninput事件取代onchange事件。onchange事件仅在区域失去焦点时触发，而oniput则在每次字符改变后被激活。你可以通过oninput事件完成上节结束时我们的计划，尽管得为处理keyup和keydown键盘事件额外编写些代码。oninput的另一个优势是：你只需要一次性地为整个表单添加事件监听器，而不需要添加到每一个元素中。所以在我们此前的例子中，你可以摈弃所有JavaScript代码，将表单定义改变为如下：
〈formmethod=getoninput="this.checkValidity();"action=checkValidity.html〉
这意味着你放弃了边框和背景色，但明显地精简了代码。
接反馈在某些情况下是非常有用的，但在一般情况下，等整个表单域被填完后再检査内容也足够了。
使用setCustomValidity()进行错误处理
若你认为此前了解的错误处理方式都不够好，也可以设计自己的内容检査功能。在以下案例中，我们将一个输入字段的类型定义为email,这确保了浏览器将自动检查其是否一个有效的e-mail地址。另外，我们要排除3种指定的e-mail域名地址：
varinvalidMailDomains=[
1hotmail.com','gmx.com,'gmail.com'];
functioncheckMailDomain(item){
for(vari=0;i〈invalidMailDomains.length:i++){if(item.value.match(invalidMailDomains[i]+,$,)){item.setCus[a-z]o[a-z]nValidity('E-mailaddressesfrom'
+invalidMailDomains[i]+'arenotaccepted.');}else{item.setCustomValidityC*);item.checkValidity();}}
在invalidMailDomains数组中的每个元素都将与输入元素值进行比较。JavaScript函数match0会执行正则运算，因此我们为域名加上一个$符号，用以标记字符串的结束。若字符串与invalidMailDomains数组中的元素匹配，就会调用setCustomValidity函数，并显示相应的错误信息。若域名与数组中的元素不符，setCustomValidityO则会传递一个空白字符串参数。input元素绑定了一个叫validationMessage的内置变量，通过为它传值，就可以在Opera显示相应的错误信息。代码的最后一行会调用checkValidity函数触发有效性验证，并显示上述错误信息。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
