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() "   /><!--     Win2K IE6 使用 ondocumentready     -->
     < 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 "   />          <!--  提示方式  " div " :文本框下部 /   " alert " :警告框  /   " nothing " :不提示  -->
     < PUBLIC:property name = " ErrorMessage "   />                  <!--  自定义提示信息,    可覆盖预定义的（对于已经包含类型建议修改本文件）,    不包含的可以自定义  -->
     < PUBLIC:property name = " ValidExpression "   />              <!--  自定义验证表达式 onblur 时检验  -->
     < PUBLIC:property name = " ValidExpressionExpand "   />      <!--  自定义验证表达式扩展，主要用于在输入中直接检查是否合法。  -->
</ PUBLIC:COMPONENT >

< script language = " javascript " >

// *****************************************************************************
//  $Header:        DataCheck
//  $Revision:    1.05
//  $LastModify:    2007-4-10
//  $Author:        YuanHaiZhong    [email protected]
//  已知问题：    目前只能从前向后输入
//                     并且不能选择后覆盖输入
//                     在目前float类型,当输入框已经有内容,选中后几个数字可以覆盖输入 "-"
//  检测输入框的值是否满足规则,数字输入默认局右
//  默认类型 UFloat
//  Copyleft (C) 2006 - MicroSystem.cn
//     
//     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
            //哪位高人可以的 [email protected]
            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) {
    var rd = {x:0,y:0};
    do{   
        rd.x += el.offsetLeft;
        rd.y += el.offsetTop;
        el = el.offsetParent;
    }
    while(el)  
    return  rd   
}  

演示地址    DataCheck Code