您的位置：首页 > 其它

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

2006-12-30 11:00 567 查看

在很多时候都要检验用户输入的数据是否满足我们预先定义的格式，用脚本或者验证控件（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>

</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

// 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 = "";

//所有可用类型

//onblur时的验证

//Mobile 等有必要

//设定要输入的字符

</script>

showErrMsg.js

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

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

//显示错误提示

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

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

var DateCheck_ObjInput ;

var DateCheck_Msg = "";

//清除提示框

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

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

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

//判断div是否备清除

//重新设定DIV位置

var sp = "";

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

function GetCoordinate(el){

{x:0,y:0};

{

rd.x += el.offsetLeft;

rd.y += el.offsetTop;

el = el.offsetParent;

}

while(el)

return rd

}

演示地址 DataCheck Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航