IE浏览器HTC验证组件：正则表达式实现表单输入实时检测与失焦校验
在早期IE浏览器环境下，利用HTC（HTML Components）技术可以将JavaScript行为封装为独立的.htc文件，从而在多个页面中复用表单验证逻辑。本文基于海洋工作室开发的validate1.0组件，详细讲解如何通过HTC实现输入框的实时键盘检测、粘贴检测以及失焦验证，并支持数字、字母、邮箱、URL等多种正则校验模式。一、HTC文件概述
HTC文件本质是一个XML文件，通过behavior属性附加到HTML元素上。在validate.htc中，定义了三个事件绑定：
- onkeypress：键盘按下时调用doEvent()，用于实时拦截非法输入。
- onpaste：粘贴时调用doEvent()，防止非法粘贴内容。
- onblur：失去焦点时调用doEvent()，用于最终完整校验。
二、预定义的校验模式
组件在regArray数组中预置了多种常用正则表达式，每个模式由四个元素组成：模式名称（reg属性值）、完整校验正则（失焦时使用）、输入过程中实时校验正则（键盘/粘贴时使用）、错误提示信息。
常见模式包括：
- int+0：非负整数
- int+：正整数
- int-0：非正整数
- int-：负整数
- int：整数
- double+0：非负浮点数
- double+：正浮点数
- double-0：非正浮点数
- double-：负浮点数
- double：浮点数
- char：纯英文字母
- upperchar：大写英文字母（支持自动转大写）
- lowerchar：小写英文字母（支持自动转小写）
- digitchar：数字和英文字母
- digitchar_：数字、字母、下划线
- email：邮箱格式
- url：URL地址
三、输入框自定义属性说明
在HTML中使用时，可为input元素设置以下属性来配置验证行为：
- reg：指定预定义的验证模式名称（如int+0），或直接写自定义正则表达式（如^aaa$）。
- check：如果设置了此属性（值无要求），则键盘按下和粘贴时也会触发实时检测；否则仅在失焦时检测。
- upper：设置后，输入的英文字母自动转换为大写。
- lower：设置后，输入的英文字母自动转换为小写。
- msg：自定义出错提示信息，若未设置则使用模式自带的提示。
- regcheck：当reg使用了自定义正则表达式时，可通过该属性指定输入过程中实时校验的宽松正则（允许用户输入过程中部分匹配，防止打断输入）。
四、完整HTC文件代码（validate.htc）
//键盘事件
<PUBLIC:ATTACH EVENT="onkeypress" ONEVENT="doEvent()" />
//粘贴事件
<PUBLIC:ATTACH EVENT="onpaste"ONEVENT="doEvent()" />
//失去焦点事件
<PUBLIC:ATTACH EVENT="onblur" ONEVENT="doEvent()" />
<SCRIPT LANGUAGE="JScript">
//预定义的检查模式
var regArray = new Array(
new Array("int+0","^\\d+$","","需要输入一个非负整数，请重新检查"),
new Array("int+","^**$","^\\d+$","需要输入一个正整数，请重新检查"),
new Array("int-0","^((-\\d+)|(0+))$","^(-|(-\\d+)|(0+))$","需要输入一个非正整数，请重新检查"),
new Array("int-","^-**$","^(-|(-\\d+)|(0+))$","需要输入一个负整数，请重新检查"),
new Array("int","^-?\\d+$","^-|(-?\\d+)$","需要输入一个整数，请重新检查"),
new Array("double+0","^\\d+(\\.\\d+)?$","^((\\d+\\.)|(\\d+(\\.\\d+)?))$","需要输入一个非负浮点数，请重新检查"),
new Array("double+","^((+\\.**)|(**\\.+)|(**))$","^((\\d+\\.)|(\\d+(\\.\\d+)?))$","需要输入一个正浮点数，请重新检查"),
new Array("double-0","^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$","^(-|(-\\d+\\.)|(0+\\.)|(-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$","需要输入一个非正浮点数，请重新检查"),
new Array("double-","^(-((+\\.**)|(**\\.+)|(**)))$","^(-|(-\\d+\\.?)|(-\\d+\\.\\d+))$","需要输入一个负浮点数，请重新检查"),
new Array("double","^(-?\\d+)(\\.\\d+)?$","^(-|((-?\\d+)(\\.\\d+)?)|(-?\\d+)\\.)$","需要输入一个浮点数，请重新检查"),
new Array("char","^+$","","您只能输入英文字母，请重新检查"),
new Array("upperchar","^+$","","您只能输入英文大写字母，请重新检查"),
new Array("lowerchar","^+$","","您只能输入英文小写字母，请重新检查"),
new Array("digitchar","^+$","","您只能输入数字和英文字母，请重新检查"),
new Array("digitchar_","^\\w+$","","您只能输入数字、英文字母和下划线，请重新检查"),
new Array("email","^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$","^(([\\w-]+(\\.[\\w-]+)*@?)|([\\w-]+(\\.[\\w-]+)*@[\\w-]+)|([\\w-]+(\\.[\\w-]+)*@([\\w-]+\\.)+)|([\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+))$","需要输入正确的email地址，请重新检查"),
new Array("url","^+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$","^(+:?)|(+:/{1,2})|(+://(\\w+(-\\w+)*))|(+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?)$","需要输入正确的url地址，请重新检查")
);
//受控元素默认的事件处理程序
function doEvent() {
var type = window.event.type;
var value = window.event.srcElement.value;
if (type == "keypress") {
var keyCode = window.event.keyCode;
if (typeof(window.event.srcElement.upper) != "undefined") {
if (keyCode >= 97 && keyCode <= 122)
keyCode = window.event.keyCode = keyCode - 32;
}
else if (typeof(window.event.srcElement.lower) != "undefined") {
if (keyCode >= 65 && keyCode <= 90)
keyCode = window.event.keyCode = keyCode + 32;
}
value += String.fromCharCode(keyCode);
}
else if (type == "paste") {
value += window.clipboardData.getData("Text");
}
if (value == "") return;
if (typeof(window.event.srcElement.reg) == "undefined") return;
if ((type == "keypress" || type == "paste") && typeof(window.event.srcElement.check) == "undefined") return;
var msg = "";
var reg = window.event.srcElement.reg;
var regExp = null;
for (var i=0;i<regArray.length;i++) {
if (regArray == reg) {
if ((type == "keypress" || type == "paste") && regArray != "")
regExp = new RegExp(regArray);
else
regExp = new RegExp(regArray);
msg = regArray;
break;
}
}
if (regExp == null) {
if ((type == "keypress" || type == "paste") && typeof(window.event.srcElement.regcheck) != "undefined")
regExp = new RegExp(window.event.srcElement.regcheck);
else
regExp = new RegExp(reg);
msg = "输入错误，请重新检查";
}
if (regExp.test(value)) return;
if (type == "blur") {
if (typeof(window.event.srcElement.msg) != "undefined")
msg = window.event.srcElement.msg;
alert(msg);
window.event.srcElement.focus();
window.event.srcElement.select();
}
else {
window.event.returnValue = false;
}
}
</SCRIPT>
五、HTML页面使用示例
将上述代码保存为validate.htc，然后通过CSS将behavior附加到input元素上。以下为一个完整的演示页面：
<html>
<head>
<style type="text/css">
TABLE { width:100%; }
INPUT { behavior:url("validate.htc"); }
</style>
</head>
<body style="margin:0">
<table>
<tr><td><a href="http://www.oceanstudio.net"><img border="0" src="logo.jpg"></a></td></tr>
</table>
<br>
<table style="margin-left:20px">
<tr>
<td>验证规则</td>
<td>实时检测</td>
<td>失去焦点时检测</td>
</tr>
<tr>
<td>非负整数</td>
<td><input type="text" value="" reg="int+0" check></td>
<td><input type="text" value="" reg="int+0"></td>
</tr>
<tr>
<td>正整数</td>
<td><input type="text" value="" reg="int+" check></td>
<td><input type="text" value="" reg="int+"></td>
</tr>
<tr>
<td>非正整数</td>
<td><input type="text" value="" reg="int-0" check></td>
<td><input type="text" value="" reg="int-0"></td>
</tr>
<tr>
<td>负整数</td>
<td><input type="text" value="" reg="int-" check></td>
<td><input type="text" value="" reg="int-"></td>
</tr>
<tr>
<td>整数</td>
<td><input type="text" value="" reg="int" check></td>
<td><input type="text" value="" reg="int"></td>
</tr>
<tr>
<td>非负浮点数</td>
<td><input type="text" value="" reg="double+0" check></td>
<td><input type="text" value="" reg="double+0"></td>
</tr>
<tr>
<td>正浮点数</td>
<td><input type="text" value="" reg="double+" check></td>
<td><input type="text" value="" reg="double+"></td>
</tr>
<tr>
<td>非正浮点数</td>
<td><input type="text" value="" reg="double-0" check></td>
<td><input type="text" value="" reg="double-0"></td>
</tr>
<tr>
<td>负浮点数</td>
<td><input type="text" value="" reg="double-" check></td>
<td><input type="text" value="" reg="double-"></td>
</tr>
<tr>
<td>浮点数</td>
<td><input type="text" value="" reg="double" check></td>
<td><input type="text" value="" reg="double"></td>
</tr>
<tr>
<td>英文字母</td>
<td><input type="text" value="" reg="char" check></td>
<td><input type="text" value="" reg="char"></td>
</tr>
<tr>
<td>大写字母(自动转换)</td>
<td><input type="text" value="" reg="upperchar" check upper></td>
<td><input type="text" value="" reg="upperchar" upper></td>
</tr>
<tr>
<td>小写字母(自动转换)</td>
<td><input type="text" value="" reg="lowerchar" check lower></td>
<td><input type="text" value="" reg="lowerchar" lower></td>
</tr>
<tr>
<td>数字和字母</td>
<td><input type="text" value="" reg="digitchar" check></td>
<td><input type="text" value="" reg="digitchar"></td>
</tr>
<tr>
<td>数字字母下划线</td>
<td><input type="text" value="" reg="digitchar_" check></td>
<td><input type="text" value="" reg="digitchar_"></td>
</tr>
<tr>
<td>email地址</td>
<td><input type="text" value="" reg="email" check></td>
<td><input type="text" value="" reg="email"></td>
</tr>
<tr>
<td>url</td>
<td><input type="text" value="" reg="url" check></td>
<td><input type="text" value="" reg="url"></td>
</tr>
<tr>
<td>自定义规则(只能输入aaa)</td>
<td><input type="text" value="" reg="^aaa$" regcheck="^a{1,3}$" msg="只能输入aaa" check></td>
<td><input type="text" value="" reg="^aaa$" regcheck="^a{1,3}$" msg="只能输入aaa"></td>
</tr>
</table>
</body>
</html>
六、注意事项
该组件依赖IE特有的behavior机制及window.event对象，仅适用于旧版IE浏览器。在开发时，若需要兼容现代浏览器，请考虑改用JavaScript通用验证方案。但理解HTC的实现方式对于维护遗留系统或学习早期前端技术仍有参考价值。
版权声明：本HTC组件代码归海洋工作室所有，可免费用于非商业目的，如需商业使用请联系原作者。
Re: IE浏览器HTC验证组件：正则表达式实现表单输入实时检测与失焦校验
写得非常详细，对HTC组件的封装思路和正则表达式应用都讲得很透彻。这种将验证逻辑独立成.htc文件复用的方式在早期IE开发中确实很实用，尤其是实时检测和失焦校验的区分处理，以及自定义属性支持简化了前端调用。感谢分享！Re: IE浏览器HTC验证组件：正则表达式实现表单输入实时检测与失焦校验
这个帖子真是满满的怀旧感！当年IE时代的HTC组件确实解决了不少表单验证的问题，封装成.htc文件后复用性很高。楼主对每个正则模式的拆解很细致，尤其是区分了实时校验和失焦校验的正则，这样既能防止输入过程中被频繁打断，又能在最后做完整验证，设计思路很实用。另外支持自定义正则和自动大小写转换也很贴心，对老项目维护来说简直是教科书级别的参考。感谢分享！Re: IE浏览器HTC验证组件：正则表达式实现表单输入实时检测与失焦校验
感谢楼主的详细分享！HTC 技术在早期 IE 环境下确实是一种很实用的封装方式，能把验证逻辑抽离成独立组件，复用性很强。您对 regArray 中不同校验模式的分类也考虑得很细致，特别是区分了实时校验和失焦完整校验，能避免在输入过程中因部分匹配而干扰用户操作。另外，像 upper/lower 自动转换、自定义正则 reg 和 regcheck 等属性的设计也很贴心，提升了灵活性。想请教一下，组件中的错误提示目前是通过 alert 弹窗还是其他方式显示？像远程脚本、服务端协作这类场景是否也能通过 HTC 来扩展？再次感谢您分享这段经典的实现思路！
页:
[1]