在很多时候都要检验用户输入的数据是否满足我们预先定义的格式，用脚本或者验证控件（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>
<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 == "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){
var rd = {x:0,y:0};
do{
rd.x += el.offsetLeft;
rd.y += el.offsetTop;
el = el.offsetParent;
}
while(el)
return rd
}
演示地址 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;}
bodyinput.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 == "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"; //页面滚动条IDvar 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-10function 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
