在早期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+","^[0-9]*[1-9][0-9]*$","^\\d+$","需要输入一个正整数，请重新检查"),
- new Array("int-0","^((-\\d+)|(0+))$","^(-|(-\\d+)|(0+))$","需要输入一个非正整数，请重新检查"),
- new Array("int-","^-[0-9]*[1-9][0-9]*$","^(-|(-\\d+)|(0+))$","需要输入一个负整数，请重新检查"),
- new Array("int","^-?\\d+$","^-|(-?\\d+)$","需要输入一个整数，请重新检查"),
- new Array("double+0","^\\d+(\\.\\d+)?$","^((\\d+\\.)|(\\d+(\\.\\d+)?))$","需要输入一个非负浮点数，请重新检查"),
- new Array("double+","^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$","^((\\d+\\.)|(\\d+(\\.\\d+)?))$","需要输入一个正浮点数，请重新检查"),
- new Array("double-0","^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$","^(-|(-\\d+\\.)|(0+\\.)|(-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$","需要输入一个非正浮点数，请重新检查"),
- new Array("double-","^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$","^(-|(-\\d+\\.?)|(-\\d+\\.\\d+))$","需要输入一个负浮点数，请重新检查"),
- new Array("double","^(-?\\d+)(\\.\\d+)?$","^(-|((-?\\d+)(\\.\\d+)?)|(-?\\d+)\\.)$","需要输入一个浮点数，请重新检查"),
- new Array("char","^[A-Za-z]+$","","您只能输入英文字母，请重新检查"),
- new Array("upperchar","^[A-Z]+$","","您只能输入英文大写字母，请重新检查"),
- new Array("lowerchar","^[a-z]+$","","您只能输入英文小写字母，请重新检查"),
- new Array("digitchar","^[A-Za-z0-9]+$","","您只能输入数字和英文字母，请重新检查"),
- 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","^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$","^([a-zA-z]+:?)|([a-zA-z]+:/{1,2})|([a-zA-z]+://(\\w+(-\\w+)*))|([a-zA-z]+://(\\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[i][0] == reg) {
- if ((type == "keypress" || type == "paste") && regArray[i][2] != "")
- regExp = new RegExp(regArray[i][2]);
- else
- regExp = new RegExp(regArray[i][1]);
- msg = regArray[i][3];
- 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元素上。以下为一个完整的演示页面：
六、注意事项
该组件依赖IE特有的behavior机制及window.event对象，仅适用于旧版IE浏览器。在开发时，若需要兼容现代浏览器，请考虑改用JavaScript通用验证方案。但理解HTC的实现方式对于维护遗留系统或学习早期前端技术仍有参考价值。
版权声明：本HTC组件代码归海洋工作室所有，可免费用于非商业目的，如需商业使用请联系原作者。 |
发表于 
发表于