表单统一验证类

最新推荐文章于 2023-01-26 15:00:56 发布

danning

最新推荐文章于 2023-01-26 15:00:56 发布

阅读量952

点赞数

文章标签： function input javascript email generator 正则表达式

本文链接：https://blog.csdn.net/danning/article/details/661779

版权

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

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