HTC 客户端验证文本框输入内容是否满足预定义格式（Only For IE ）！-CSDN博客

HTC 客户端验证文本框输入内容是否满足预定义格式（Only For IE ）！

在很多时候都要检验用户输入的数据是否满足我们预先定义的格式，用脚本或者验证控件（ASP.NET ）都是件麻烦的事情。为此特地写了如下的控件，但是因为该功能是通过 HTC（HTML Components 适用 IE5+ ）方式实现并不能在其他浏览器使用。我想这个会比较适合Only For IE 的 B/S 系统开发。
由于该功能只能在客户端验证（有些时候不太安全），结合 ASP.NET 自定义控件实现服务器端验证控件正在整理中即将贴出。
演示地址 DataCheck Code

DataCheck.htm

< html >

< head >

< title > HTC 检测输入框的值是否满足规则,数字输入默认局右 </ title >

< meta name ="Generator" content ="EditPlus" >

< meta name ="Author" content ="Microsystem.cn" >

< meta name ="Keywords" content ="HTC" >

< meta name ="Description" content ="HTC 检测输入框的值是否满足规则,数字输入默认局右" >

< script type ="text/javascript" language ="javascript" src ="showErrMsg.js" ></ script >

< style >

body{

}{font-size: 14px;}

input.DataCheck{

}{

behavior:url('DataCheck.htc');

border:1px solid #7CA2CC;

highlightBackgroundColor: #FFFF80;

}

INPUT.TEXT {

}{ font-size:11px; font-family: verdana;border: 1px solid #AFC2CC; background-color:#FFFFFF;}

div#msg{

}{

font-size: 12px;

position:absolute;

background-color:#FFFFDD;

border: 1px solid #000000;

padding: 2 5 2 5;

z-index:1;

filter: Alpha(Opacity=100);

}

</ style >

</ head >

< body >

< input type ="text" name ="" class ="must" > 一般输入框 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="DateTime" HintMode ="alert" > DateTime / 日期 alert < br >

< input type ="text" name ="" class ="DataCheck" DataType ="DateTime" > DateTime / 日期 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="Time" ErrorMessage ="自定义信息: 时间类型" > time / 时间 < br >

< input type ="text" name ="" class ="DataCheck" value ="18,943,153.00" > flaot < br >

< input type ="text" name ="" class ="DataCheck" DataType ="Int" HintMode ="nothing" > int / 整数 nothing < br >

< input type ="text" name ="" class ="DataCheck" DataType ="UInt" > 无符号整数 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="lowercase" > lowercase / 小写英文 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="capital" > capital / 大写英文 < br >

< input type ="text" name ="" class ="DataCheck must" > Float / 两位小数 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="Cn" > chinese / 中文 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="En" > english < br >

< input type ="text" name ="" class ="DataCheck" DataType ="NaturalNumber" ErrorMessage ="自定义：自然数" > 自然数 < br >

< input type ="text" name ="" class ="DataCheck" DataType ="Mobile" > Mobile < br >

< hr >

以下为自己定义 < br >

< input type ="text" name ="" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^([0-2]\d?|[3][0-1]?|[4-9])?$/"

ErrorMessage ="自定义：请输入电话号码" > 自定义 ValidExpression = /^([0-2]\d?|[3][0-1]?|[4-9])?$/ < br >

< input type ="text" name ="Zip" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^\d{6}$/"

ValidExpressionExpand ="/^\d{0,6}$/"

ErrorMessage ="邮政编码" > 自定义：邮编 ValidExpression=/^\d{6}$/ ,ValidExpressionExpand=/^\d{0,6}$/ ; 应该在 onblur在验证一次 < br >

< input type ="text" name ="Email" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"

ErrorMessage ="Email" > Email < br >

< input type ="text" name ="Url" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^([a-zA-z]+:\/\/)?([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/"

ErrorMessage ="请输入正确的超链接" > Url < br >

< input type ="text" name ="Url2" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^[\w|-]+$/"

ValidExpressionExpand ="/^[\w|-]+$/"

ErrorMessage ="由数字、26个英文字母或者下划线组成的字符串 " / > 由数字、26个英文字母或者下划线组成的字符串 < br >

< input type ="text" name ="无符号整数" class ="DataCheck"

DataType ="Custom"

ValidExpression ="/^\d{0,9}$/"

ValidExpressionExpand ="/^\d{0,9}$/"

ErrorMessage ="由数字、26个英文字母或者下划线组成的字符串 " / > 无符号整数 < br >

遗留问题: < br >

< li > 只能从前向后输入 </ li >

< li > 并且不能选择后覆盖输入 </ li >

< li > 仅对单行输入有效 </ li >

< div id ="mymsg" ></ div >

</ body >

</ html >

DataCheck.htc

< PUBLIC:COMPONENT >

< PUBLIC:ATTACH EVENT = " oncontentready " ONEVENT = " initElement() " />

< PUBLIC:ATTACH EVENT = " onkeypress " ONEVENT = " checkInput() " />

< PUBLIC:ATTACH EVENT = " onpaste " ONEVENT = " checkInput() " />

< PUBLIC:ATTACH EVENT = " ondrop " ONEVENT = " checkInput() " />

< PUBLIC:ATTACH EVENT = " onblur " ONEVENT = " Onblur() " />

< PUBLIC:ATTACH EVENT = " onfocus " ONEVENT = " OnFocus() " />

< PUBLIC:property name = " DataType " value = " UFloat " />

< PUBLIC:property name = " HintMode " value = " div " />

< PUBLIC:property name = " ErrorMessage " />

< PUBLIC:property name = " ValidExpression " />

< PUBLIC:property name = " ValidExpressionExpand " />

</ PUBLIC:COMPONENT >

< script language = " javascript " >

// *****************************************************************************

// $Header: DataCheck

// $Revision: 1.05

// $LastModify: 2007-4-10

// $Author: YuanHaiZhong topx@163.com

// 已知问题：目前只能从前向后输入

// 并且不能选择后覆盖输入

// 在目前float类型,当输入框已经有内容,选中后几个数字可以覆盖输入 "-"

// 检测输入框的值是否满足规则,数字输入默认局右

// 默认类型 UFloat

// 1.05

// float 小数4位

// 1.04

// 提示框出现是改变背景色，适用与 alert

// 1.03

// 提取公共属性,参数化

// 页面自定义输入掩码/错误信息/提示类型

// 提示后返回获得焦点

// 内部优化checkInput()

// 1.02

// 改进非法提示信息,用退黄来处理,不出现alert

// 目前提示信息在外部实现，setTimeout 不能在HTC 中使用

// 1.01

// 添加非法输入提示

// ******************************************************************************/

var obj;

var inputStr = "" ;

function initElement()

{

　 obj = this;

//当不是只可以输入中文时锁定输入法

if (DataType != "Cn")

{

obj.style.imeMode = "disabled";

}

if (DataType == "Int" || DataType == "UInt" || DataType == "Float" || DataType == "UFloat" || DataType == "NaturalNumber")

{

obj.style.textAlign = "right"; //数字类型时局右

}

function OnFocus()

{

if (DataType == "Int" || DataType == "UInt" || DataType == "Float" || DataType == "UFloat" || DataType == "NaturalNumber")

{

element.value = element.value.replace(/,/gm,"");

}

element.select();

}

// 所有可用类型

function getValidExpressionExpand()

{

if (DataType == "Custom")return eval(ValidExpressionExpand);

var ValidExpressionExpands = new Object();

ValidExpressionExpands["DateTime"] = /^\d

{1,4}([-\/](((0[1-9]

{0,1})|(1[0-2]

{1})|([1-9]

{1}))([-\/]([0-2]\d?|[3][0-1]?|[4-9])?)?)?)?$/; //日期

ValidExpressionExpands["Time"] = /^(([0|1]\d?)|(2[0-3]?)|([0-9]?))([:]([0-5]\d?|[6-9])?)?$/; //时间：12:15

ValidExpressionExpands["NaturalNumber"] = /^[1-9]

{1}[0-9]

{0,8}$/; //自然数 [1-~]

ValidExpressionExpands["UInt"] = /^(0?|([1-9]

{1}[0-9]

{0,8}))$/; //无符号整数

ValidExpressionExpands["Int"] = /^(0?|-?([1-9]

{1}[0-9]

{0,8}))$/; //整数默认9位亿 //ValidExpressionExpands["Int"] = /^[0-9]*$/; //整数

ValidExpressionExpands["UFloat"] = /^\d*\.?\d

{0,4}$/; //4位小数

ValidExpressionExpands["Float"] = /^-?\d*\.?\d

{0,4}$/; //4位小数没有限制头连续输入0,改进中

.2006-6-24

ValidExpressionExpands["lowercase"] = /^[a-z]*$/; //小写英文

ValidExpressionExpands["capital"] = /^[A-Z]*$/; //大写英文

ValidExpressionExpands["Cn"] = /^[^\x00-\xff]*$/; //中文^[\u4E00-\u9FA5]*$

ValidExpressionExpands["En"] = /^[_a-zA-Z0-9]*$/; //英文

ValidExpressionExpands["Mobile"] = /^1([3|5]([0-9]

{0,9})?)?$/; ///^1[0-9]{0,10}$/

showmymsg("getValidExpressionExpand()", "out");

return ValidExpressionExpands[DataType];

}

// onblur时的验证

// Mobile 等有必要

function Onblur()

{

var ValidExpressions = new Object();

ValidExpressions["DateTime"] = /^([1-3]

{1}[0-9]

{1,3}[\-\/]([0]

{1}[1-9]

{1}|[1-9]

{1}|[1]

{1}[0-2]

{1})[\-\/]([0]

{1}[1-9]

{1}|[1-9]

{1}|[1-2]

{1}[0-9]

{1}|[3]

{1}[0-1]

{1}))

{0,1}$/;

ValidExpressions["Time"] = /^(([0|1]\d?)|(2[0-3]?)|([0-9]?)):([0-5]

{1}\d?|[6-9]

{1})$/; //加不加$都一样

ValidExpressions["Mobile"] = /^1[3|5]\d

{9}$/;

/**//*

ValidExpressionExpands 验证够严谨以下可以不用

ValidExpressions["Float"] = /^(-?\d+)(\.\d+)?$/;

ValidExpressions["NaturalNumber"] = /^[0-9]*[1-9][0-9]*$/; 可以不用

//''''' 稍后补充

var reg = ValidExpression ? eval(ValidExpression) : ValidExpressions[DataType];

if(reg && element.value != "")

{

var b = reg.test(element.value);

if(!b)

{

getTypeExplain();

var oldStyle = this.currentStyle.backgroundColor;

this.style.backgroundColor = element.currentStyle.highlightBackgroundColor;

showErrMsg(element, ErrorMessage, "alert");

element.value = "";

element.focus();

this.style.backgroundColor = oldStyle;

}

hiddenErrMsg();

}

function getTypeExplain()

{

if(ErrorMessage)return ;

//如果自定义错误信息就不使用默认

var typeExplain = new Object(); //类型说明当输入非法时可以提示

typeExplain["DateTime"] = "日期类型 \n 如: 2008-8-8 2008/08/08";

typeExplain["Time"] = "时间 \n 如:12:12";

typeExplain["NaturalNumber"] = "自然数";

typeExplain["Int"] = "整数";

typeExplain["UInt"] = "整数";

typeExplain["UFloat"] = "整数或者四位小数的实数 \n 如: 888.8008";

typeExplain["lowercase"] = "小写英文字母";

typeExplain["capital"] = "大写英文字母";

typeExplain["Cn"] = "汉字";

typeExplain["En"] = "英文、数字、下滑线";

typeExplain["Mobile"] = "手机号码";

//自定义DataType后如未定义错误信息

if (!typeExplain[DataType])

{

if(ErrorMessage == "")

{

ErrorMessage = "掩码：" + DataType;

}

return ;

}

ErrorMessage = "这里只可以输入" + typeExplain[DataType];

}

function checkInput(action)

{

//当有非法提示时,避免按下回车键也出现提示

if (event.keyCode == 13)

{

event.returnValue = true;

return true;

}

var reg = getValidExpressionExpand();

if (reg == undefined)return;

//初始化

setInputStr(action);

var docSel = document.selection.createRange();

if (docSel.parentElement().tagName != "INPUT")

return false;

oSel = docSel.duplicate();

oSel.text = "";

var srcRange = obj.createTextRange();

oSel.setEndPoint("StartToStart", srcRange);

var str = oSel.text + inputStr + srcRange.text.substr(oSel.text.length);

// {

// event.returnValue = false; //可以自定义DataType 正则表达式后此句无效

// ErrorMessage = "<span style='color:red'>没有检测到类型 DataType = \"" + DataType + "\" !!</span>";

// showErrMsg(obj, ErrorMessage, HintMode);

// event.srcElement.focus()

// }

var b = reg.test(str);

if (!b)

{

getTypeExplain();

var oldStyle = this.currentStyle.backgroundColor;

this.style.backgroundColor = element.currentStyle.highlightBackgroundColor;

showErrMsg(obj, ErrorMessage, HintMode);

event.srcElement.focus();

this.style.backgroundColor = oldStyle;

}

event.returnValue = b;

}

// 设定要输入的字符

function setInputStr()

{

switch (event.type)

{

case "keypress":

inputStr = String.fromCharCode(event.keyCode);

break;

case "paste":

inputStr = window.clipboardData.getData('Text');

break;

case "drop":

inputStr = event.dataTransfer.getData('Text');

break;

default:

break;

}

</ script >

showErrMsg.js

// 以下全部为非法输入提示信息

// 非法输入时的提示信息输出退黄显示,比较友好

// 显示错误提示

var DateCheck_PageScrollDiv = " divScroll " ; // 页面滚动条ID

var DateCheck_ErrorImgUrl = " errorInfo.gif " ; // Icon 位置

var DateCheck_ObjInput ;

var DateCheck_Msg = "" ;

function showErrMsg(o,errMsg,HintMode)

{

showmymsg("showErrMsg()","in");

DateCheck_ObjInput = o;

DateCheck_Msg = errMsg;

switch (HintMode)

{

case "nothing":

return false;

break;

case "alert":

alert(DateCheck_Msg);

return false;

break;

case "div":

if(DateCheck_ObjInput.show != "true" ||!checkMsg() )

{

createDiv();

}

else

{

lightDiv();

}

break;

default :

break;

}

showmymsg("showErrMsg()","out");

}

// 清除提示框

function hiddenErrMsg()

{

showmymsg("hiddenErrMsg()","in");

if(checkMsg())

{

window.document.body.removeChild(DateCheck_DivErrorMsg);

}

showmymsg("hiddenErrMsg()","out");

}

// 渐渐隐藏错误信息提示

function removeDiv()

{

showmymsg("removeDiv()","in");

if(checkMsg())

{

//alert(typeof(DateCheck_DivErrorMsg));

if(DateCheck_DivErrorMsg.filters.Alpha.opacity > 1)

{

DateCheck_DivErrorMsg.filters.Alpha.opacity -= 1;

//不能在HTC 中实现setTimeout

//哪位高人可以的 topx@163.com

window.setTimeout("removeDiv()",50);

}

else

{

document.body.removeChild(DateCheck_DivErrorMsg);

DateCheck_ObjInput.setAttribute("show","false");

}

showmymsg("removeDiv()","out");

}

// 新建一个div 显示非法输入提示信息

function createDiv()

{

showmymsg("createDiv()","in");

var objDiv = window.document.createElement("div");

objDiv.setAttribute("id","DateCheck_DivErrorMsg");

//不太确定样式方在外面还是这里

objDiv.style.cssText = "font-size: 12px;position:absolute;background-color:#FFFFDD;border: 1px solid #000000;padding: 2 5 2 5;z-index:1;filter: Alpha(Opacity=100);";

objDiv.innerHTML = "<img src='" + DateCheck_ErrorImgUrl + "' /> " + DateCheck_Msg.replace("\n","<br>") ;

document.body.insertAdjacentElement("beforeEnd",objDiv);

// DateCheck_ObjInput.insertAdjacentElement("afterEnd",objDiv); //在有外部Div滚动时错误

SetDivPosition();

DateCheck_ObjInput.setAttribute("show","true");

removeDiv();

//window.setTimeout("removeDiv()",1000);//1秒后渐渐隐藏

showmymsg("createDiv()","out");

}

// 当已经确认已经建立了 div 只要加深,不透明既可

function lightDiv()

{

SetDivPosition();

DateCheck_DivErrorMsg.filters.Alpha.opacity = 100;

showmymsg("lightDiv()");

}

// 判断div是否备清除

function checkMsg()

{

showmymsg("checkMsg()","in");

return (typeof(DateCheck_DivErrorMsg)=="object");

showmymsg("checkMsg()","out");

}

// 重新设定DIV位置

function SetDivPosition()

{

//如果有外部Div滚动条修正偏移量

var divScroll = window.document.getElementById(DateCheck_PageScrollDiv);

if(divScroll != undefined)

{

DateCheck_DivErrorMsg.style.top = DateCheck_ObjInput.offsetTop + DateCheck_ObjInput.clientHeight + 23 - divScroll.scrollTop;

DateCheck_DivErrorMsg.style.left = GetCoordinate(DateCheck_ObjInput).x - divScroll.scrollLeft + 2;

// 暂不考虑Div宽度

// DateCheck_DivErrorMsg.style.top = DateCheck_ObjInput.offsetTop + DateCheck_ObjInput.clientHeight + 26 - divScroll.scrollTop + parseInt(divScroll.currentStyle.borderTopWidth.replace("px",""));

// DateCheck_DivErrorMsg.style.left = GetCoordinate(DateCheck_ObjInput).x - divScroll.scrollLeft + 1 +parseInt(divScroll.currentStyle.borderLeftWidth.replace("px",""));

}else

{

DateCheck_DivErrorMsg.style.top = DateCheck_ObjInput.offsetTop + DateCheck_ObjInput.clientHeight + 4;

DateCheck_DivErrorMsg.style.left = DateCheck_ObjInput.offsetLeft;

}

var sp = "" ;

function showmymsg(str,f)

{

//window.document.getElementById("mymsg").innerHTML += "<br>" + sp + str + f;

}

// 得到控件的绝对定位（除去内部滚动条）2007-5-10

function GetCoordinate(el)