现在的位置: 首页 > 综合 > 正文

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

2012年03月26日 ⁄ 综合 ⁄ 共 5837字 ⁄ 字号 评论关闭
在很多时候都要检验用户输入的数据是否满足我们预先定义的格式,用脚本或者验证控件(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    topx@163.com
//
 已知问题:    目前只能从前向后输入
//
                    并且不能选择后覆盖输入
//
                    在目前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 

抱歉!评论已关闭.