文本输入框的客户端校验
<!--
validate.htc
-->
<public:component>
<public:property get="getEmpty" name="Empty"/>
<public:property get="getZero" name="Zero"/>
<public:property get="getInteger" name="Integer"/>
<public:property get="getFloat" name="Float"/>
<public:property get="getUDate" name="UDate"/>
<public:property get="getMoney" name="Money"/>
<public:property get="getURL" name="URL"/>
<public:property get="getEmail" name="Email" />
<public:property get="getSPhone" name="SPhone"/>
<public:property get="getLPhone" name="LPhone"/>
<public:property get="getPhone" name="Phone"/>
<public:property get="getCellPhone" name="CellPhone"/>
<public:property name="regexp"/>
<public:property name="validation"/>
<public:property name="message"/>
<public:method name="validate"/>
<script language="javascript" type="text/javascript">
//@region Private Fields
var bEmpty = 0x1;
var bZero = 0x2;
var bInteger = 0x4;
var bFloat = 0x8;
var bDate = 0x10;
var bMoney = 0x20;
var bEmail = 0x40;
var bURL = 0x80;
var bSPhone = 0x100;
var bLPhone = 0x200;
var bPhone = 0x300;
var bCellPhone = 0x400;
var RegInt = /^(([+]|[-])?0|([1-9][0-9]*))?$/; //整数
var RegFloat = /^(([+]|[-])?0|([1-9][0-9]*)([.][0-9]+)?)?$/; //浮点数
var RegMoney = /^((0|[1-9][0-9]*)(.[0-9]{1,2})?)?$/; //货币
var RegSPhone = /^([0-9]{6,8}([-][0-9]{3,6})?)?$/; //电话号码（短）
var RegLPhone = /^([0-9]{3,4}[-][0-9]{6,8}([-][0-9]{3,6})?)?$/; //电话号码（长）
var RegEmail = /^(\w+[@]\w+([.]\w+)+)?$/; //电子邮件
var RegURL = /^((http:[/][/])?\w+([.]\w+|[/]\w*)*)?$/; //网页地址
var RegCellPhone = /^([0-9]{11})?$/; //手机号码
function getEmpty()
{
return bEmpty;
}
function getZero()
{
return bZero;
}
function getInteger()
{
return bInteger;
}
function getFloat()
{
return bFloat;
}
function getUDate()
{
return bDate;
}
function getMoney()
{
return bMoney;
}
function getEmail()
{
return bEmail;
}
function getURL()
{
return bURL;
}
function getSPhone()
{
return bSPhone;
}
function getLPhone()
{
return bLPhone;
}
function getPhone()
{
return bPhone;
}
function getCellPhone()
{
return bCellPhone;
}
//@end region
//@region Private Methods
function isEmpty(text){
if (text == "")
{
return true;
}
var regPattern = /^\s+$/;
return regPattern.test(text);
}
function isZero(text){
if(text != null && text == 0)return true;
return false;
}
function checkDate(text){
if(text.length==0)
return true;
if(text.length!=10)
return false;
var date=new Date(text.substring(0,4),text.substring(5,7),text.substring(8));
if(date=="NaN")
return false;
return true;
}
//@end region
//@region events
function validate(doSubmit)
{
var valid = eval(validation);
if (regexp != null)
{
var validPattern = new RegExp("^("+regexp+")?$", "m");
if (false == validPattern.test(value))
{
if (message == null)
alert(title+" 输入格式不正确");
else
alert(message);
this.focus();
return false;
}
}
if (valid & Empty && isEmpty(value)) //判断是否为空
{
if (message == null)
alert(title+" 不能为空");
else
alert(message);
this.focus();
return false;
}
if (valid & Zero && isZero(value))
{
if (message == null)
alert(title+" 不能为0");
else
alert(message);
this.focus();
return false;
}
if (valid & Integer && !RegInt.test(value))
{
if (message == null)
alert(title+" 必须为整数");
else
alert(message);
this.focus();
return false;
}
if (valid & Float && !RegFloat.test(value))
{
if (message == null)
alert(title+" 必须为数值（整数或小数）");
else
alert(message);
this.focus();
return false;
}
if (valid & UDate && !checkDate(value))
{
if (message == null)
alert(title+" 必须为标准日期格式(yyyy-mm-dd)");
else
alert(message);
this.focus();
return false;
}
if (valid & Email && !RegEmail.test(value))
{
if (message == null)
alert(title+" Email格式不正确");
else
alert(message);
this.focus();
return false;
}
if (valid & URL && !RegURL.test(value))
{
if (message == null)
alert(title+" URL格式不正确");
else
alert(message);
this.focus();
return false;
}
if (valid & Money && !RegMoney.test(value))
{
if (message == null)
alert(title+" 货币格式不正确");
else
alert(message);
this.focus();
return false;
}
if ((valid & Phone) == LPhone && !RegLPhone.test(value))
{
if (message == null)
alert(title+" 电话号码格式不正确");
else
alert(message);
this.focus();
return false;
}
if ((valid & Phone) == SPhone && !RegSPhone.test(value))
{
if (message == null)
alert(title+" 电话号码格式不正确");
else
alert(message);
this.focus();
return false;
}
if ((valid & Phone) == Phone && !RegLPhone.test(value) &&
!RegSPhone.test(value))
{
if (message == null)
alert(title+" 电话号码格式不正确");
else
alert(message);
this.focus();
return false;
}
if (valid & CellPhone && !RegCellPhone.test(value))
{
if (message == null)
alert(title+" 手机号码格式不正确");
else
alert(message);
this.focus();
return false;
}
if (doSubmit == true)
{
this.form.submit();
}
return true;
}
//@end region
</script>
</public:component>
<!--
validateForm.htc
-->
<public:component>
<public:method name="validateSubmit"/>
<script language="JScript">
function validateSubmit(doSubmit)
{
var retVal = true;
if (this.nodeType == 1)
{
retVal = routeNodes(this.childNodes);
if (retVal == doSubmit)
{
this.submit();
}
}
return retVal;
}
function routeNodes(nodes)
{
var retVal = true;
for (var i = 0; retVal && i < nodes.length; i++)
{
if (nodes[i].nodeType == 1)
{
var childNodes = nodes[i].childNodes;
if (childNodes.length > 0)
{
var tmp = routeNodes(childNodes);
retVal = retVal && tmp;
}
else if (nodes[i].validation != null ||
nodes[i].regexp != null)
{
var tmp = nodes[i].validate();
retVal = retVal && tmp;
}
}
}
return retVal;
}
</script>
</public:component>
<!--
samples.html
-->
<html>
<head>
<style type="text/css">
form
{
behavior:url(validateForm.htc);
}
input
{
behavior:url(validate.htc);
}
</style>
</head>
<body>
<form name="form1" id="form1" onsubmit="return this.validateSubmit()">
测试1：<input title="测试1" type="text" name="test1" id="test1"
validation="Empty"/><br>
测试2：<input title="测试2" type="text" name="test2" id="test2"
validation="Empty|Zero|Integer"/><br>
测试3：<input title="测试3" type="text" name="test3" id="test3"
validation="Email"/><br>
测试4：<input title="测试4" type="text" name="test4" id="test4"
validation="Phone"/><br>
测试5：<input title="测试5" type="text" name="test5" id="test5"
regexp="ftp:[\/\/].+"/><br>
<input type="submit"/>
</form>
</body>
</html>
