用htc实现方式验证模块实用指南

作者:袖梨 2026-08-31

平时做技术实践时,很多问题不是概念不会,而是细节没串起来。拿“用htc实现方法验证模块”来说,它看着像小点,放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序,把思路、关键写法和容易踩坑的地方讲清楚,便于大家直接对照操作。

复制代码 代码如下所示:

/***************************************************************************************
* validate1.0
落到代码里,* 此代码版权归海洋工作室ocean所有,您能够非商业目的采用、复制、修改此代码,但需
结合项目来看,* 保留本工作室的版权信息。如果您采用、修改此代码为商业目的,请联系本工作室取得采用许可。
*
从实现思路看,* 如果您对本程序有什么建议,请email to:[email protected]
*
* 海洋工作室
* (链接已移除)
* ocean([email protected]) 制作
*****************************************************************************************/
//键盘事件
<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+$","","需输入一个非负整数,请重新检查"), //非负整数(正整数 + 0)
结合项目来看,new Array("int+","^[0-9]*[1-9][0-9]*$","^\d+$","需输入一个正整数,请重新检查"), //正整数
在这个场景下,new Array("int-0","^((-\d+)|(0+))$","^(-|(-\d+)|(0+))$","需输入一个非正整数,请重新检查"), //非正整数(负整数 + 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+)?))$","需输入一个非负浮点数,请重新检查"), //非负浮点数(正浮点数 + 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-0","^((-\d+(\.\d+)?)|(0+(\.0+)?))$","^(-|(-\d+\.)|(0+\.)|(-\d+(\.\d+)?)|(0+(\.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]+$","","您只能输入英文字母,请重新检查"), //由26个英文字母组成的字符串
结合项目来看,new Array("upperchar","^[A-Z]+$","","您只能输入英文大写字母,请重新检查"), //由26个英文字母的大写组成的字符串
实际处理时,new Array("lowerchar","^[a-z]+$","","您只能输入英文小写字母,请重新检查"), //由26个英文字母的小写组成的字符串
实际处理时,new Array("digitchar","^[A-Za-z0-9]+$","","您只能输入数字和英文字母,请重新检查"), //由数字和26个英文字母组成的字符串
从实现思路看,new Array("digitchar_","^\w+$","","您只能输入数字、英文字母和下划线,请重新检查"), //由数字、26个英文字母或者下划线组成的字符串
结合项目来看,new Array("email","^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$","^(([\w-]+(\.[\w-]+)*@?)|([\w-]+(\.[\w-]+)*@[\w-]+)|([\w-]+(\.[\w-]+)*@([\w-]+\.)+)|([\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+))$","需输入正确的email地址,请重新检查"), //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地址,请重新检查") //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;
//如果触发元素没有设置reg属性,则得到不进行任何检查。
if (typeof(window.event.srcElement.reg) == "undefined") return;
//如果触发元素没有定义check属性,则在按键和粘贴事件中不做检查
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) { //如果没有查找到预定义的检查模式,说明reg本身就为正则表达式对象。
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>
<head>
<style type="text/css">
TABLE {
width:100%;
}
INPUT {
behavior:url("validate.htc");
}
</style>
</head>
<body style="margin:0">
<table>
<tr><td><a href="(链接已移除)"><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>非负整数(正整数 + 0)</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>非正整数(负整数 + 0)</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>非负浮点数(正浮点数 + 0)</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>非正浮点数(负浮点数 + 0)</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>由26个英文字母组成的字符串</td>
<td><input type="text" value="" reg="char" check></td>
<td><input type="text" value="" reg="char"></td>
</tr>
<tr>
<td>由26个英文字母的大写组成的字符串(输入小写字母会自动转换成大写)</td>
<td><input type="text" value="" reg="upperchar" check upper></td>
<td><input type="text" value="" reg="upperchar" upper></td>
</tr>
<tr>
<td>由26个英文字母的小写组成的字符串(输入大写字母会自动转换成小写)</td>
<td><input type="text" value="" reg="lowerchar" check lower></td>
<td><input type="text" value="" reg="lowerchar" lower></td>
</tr>
<tr>
<td>由数字和26个英文字母组成的字符串</td>
<td><input type="text" value="" reg="digitchar" check></td>
<td><input type="text" value="" reg="digitchar"></td>
</tr>
<tr>
<td>由数字、26个英文字母或者下划线组成的字符串</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>
<hr width="50%" style="color: #FF0000">
<div style="text-align:center;font-size:9pt">copyright 2004 &copy 海洋工作室(<a href="mailto:[email protected]">[email protected]</a>)</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

相关文章

精彩推荐