文本输入框的客户端校验

最新推荐文章于 2024-03-27 22:57:21 发布

yanwl

最新推荐文章于 2024-03-27 22:57:21 发布

阅读量1.9k

点赞数

分类专栏： Javascript 文章标签： function validation null integer input 测试

本文链接：https://blog.csdn.net/yanwl/article/details/290162

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

//@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})?$/; //手机号码

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

<public:component>
<public:method name="validateSubmit"/>

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>

<html>
<head>
<style type="text/css">
form
{
behavior:url(validateForm.htc);
}
input
{
behavior:url(validate.htc);
}
</style>
</head>
<body>
<form name="form1" id="form1" οnsubmit="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>