分享

表单验证

 小朋 2006-10-18
此验证类实现对数字、整数、小数、日期、电子邮件等进行验证。同时为以后需要添加验证功能提供扩展。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Validate(){

 //ids保存验证的id,可多值,用逗号","隔开

 //统一验证类型是否都为空。可供外部调用
 Validate.prototype.isEmptys=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isEmpty( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

   //统一验证类型是否都为整数。可供外部调用
 Validate.prototype.isInts=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isInt( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

 //统一验证类型是否都为数字。可供外部调用
 Validate.prototype.isNumerics=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isNumeric( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

 //统一验证类型是否都为小数。可供外部调用
 Validate.prototype.isFloats=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isFloat( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

 //统一验证类型是否都为日期。可供外部调用
 Validate.prototype.isDates=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isDate( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

 //统一验证类型是否都为电子邮件。可供外部调用
 Validate.prototype.isEmails=function( ids ){
  var arrIds = [];
  if(ids.indexOf(",")!=-1)  //判断是否有,分隔符
   arrIds = ids.split( "," );
  else
   arrIds[0]=ids;
  var i = 0;
  var strValue;
  for(i=0;i<arrIds.length;i++){
   strValue=document.getElementById(arrIds[i]).value;
   if(isEmail( strValue )){
    document.getElementById(arrIds[i]).focus();
    return true;
   }
  }
  return false;
 }

/**
 *以下为内部使用的函数,不提供外部调用
 */

 //正则表达式验证match方法, re 参数最后以 g 结尾。
 function checkExp( re, s ){
  return s.match(re)!=null;
    }

 // 验证是否 整数
 function isInt( strValue ){
  return checkExp( /^\d*$/g, strValue );
 }

 // 验证是否 数字
 function isNumeric( strValue ){
  return !isNaN(strValue);  //isNaN判断参数值是否是一个数字,若不是数字则返回true
 }
 
 // 验证是否 小数
 function isFloat( strValue ){
  return checkExp(/^[0-9]+\.[0-9]+$/g, strValue );
 }
 
 // 验证是否 电子邮件
 function isEmail( strValue ){
  return checkExp(/^[a-zA-Z]+[a-zA-Z0-9_]*@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/g, strValue );
 }

 // 验证是否 为空
 function isEmpty( strValue )
 {
  if( strValue == "" )
   return true;
  else
   return false;
 }

 //验证是否 日期
 function isDate( strValue ){
 
  // 日期格式必须是 2001-10-1/2001-1-10 或者为空
  if( isEmpty( strValue ) ) return true;

  if( !checkExp( /^\d{4}-[01]?\d-[0-3]?\d$/g, strValue ) ) return false;
  // 或者 /^\d{4}-[1-12]-[1-31]\d$/

  var arr = strValue.split( "-" );
  var year = arr[0];
  var month = arr[1];
  var day = arr[2];

  // 1 <= 月份 <= 12,1 <= 日期 <= 31
  if( !( ( 1<= month ) && ( 12 >= month ) && ( 31 >= day ) && ( 1 <= day ) ) )
   return false;

  // 润年检查
  if( !( ( year % 4 ) == 0 ) && ( month == 2) && ( day == 29 ) )
   return false;

  // 7月以前的双月每月不超过30天
  if( ( month <= 7 ) && ( ( month % 2 ) == 0 ) && ( day >= 31 ) )
   return false;

  // 8月以后的单月每月不超过30天
  if( ( month >= 8) && ( ( month % 2 ) == 1) && ( day >= 31 ) )
   return false;

  // 2月最多29天
  if( ( month == 2) && ( day >=30 ) )
   return false;

  return true;
 }
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//测试
var vl=new Validate();
function v(){
 if (vl.isEmptys("id,name,password1,password2"))
 {
  alert("id,name,password1,password2不能为空。");
  return false;
 }else
 if (!vl.isEmptys("email") && !vl.isEmails("email"))
 {
  alert("email格式不正确。");
  return false;
 }else
 if (!vl.isEmptys("money") && !vl.isFloats("money"))
 {
  alert("金额至少有一位小数。");
  return false;
 }else
 if (!vl.isEmptys("phone") && !vl.isNumerics("phone"))
 {
  alert("电话号码必须为数字。");
  return false;
 }else
 if (!vl.isEmptys("birthday") && !vl.isDates("birthday"))
 {
  alert("出生日期格式为:1980-12-12。");
  return false;
 }else
 if (document.getElementById("password1").value!=document.getElementById("password2").value)
 {
  alert("两次输入的密码必须相同。");
  return false;
 }else
 {
     alert("全部验证正确。");
  return true;
 }
}

//-->
</SCRIPT>
</HEAD>

<BODY align="left">
<FORM method="post" action="" onSubmit="return v();" target="_blank">
帐 号*:<INPUT TYPE="text" ID="id">(不能为空)<BR>
名 字*:<INPUT TYPE="text" ID="name">(不能为空)<BR>
密  码*:<INPUT TYPE="password" ID="password1">(不能为空)<BR>
确认密码:<INPUT TYPE="password" ID="password2">(不能为空)<BR>
出生日期:<INPUT TYPE="text" ID="birthday">(格式为:1980-12-12)<BR>
金  额:<INPUT TYPE="text" ID="money">(至少有一位小数,允许为空)<BR>
电子邮件:<INPUT TYPE="text" ID="email">(格式为XX@XX.XX,允许为空)<BR>
电话号码:<INPUT TYPE="text" ID="phone">(数字号码,允许为空)<BR>
<CENTER><INPUT TYPE="submit" value="统一验证"></CENTER>
</FORM>
</BODY>
</HTML>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多