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