通用的表单验证代码

2009-11-24 按钮表单 ℃

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证类</title>
<style>
.alert{border:1px solid red; }
.validator_msgSpan{border:solid 1px red;background-color:Yellow; font-size:12px;}
</style>
<script language="javascript" type="text/javascript" src="http://omeweb.com/photo/temp/validator/jquery.pack.js"></script>
<script language="javascript" type="text/javascript">
//去除字符串两边的空格
String.prototype.trim = function () {
    return this.replace(/(^\s+)|(\s+$)/g, "");
}
//检测字符串是否为空
String.prototype.isEmpty = function () {
    return !(/.?[^\s　]+/.test(this));
}
//检测值是否介于某两个指定的值之间
String.prototype.isBetween = function (val, min, max) {
    return isNaN(val) == false  &&  val >= min  &&  val <= max;
}
//获取最大值或最小值
String.prototype.getBetweenVal = function (what) {
    var val = this.split(',');
    var min = val[0];
    var max = val[1] == null ? val[0] : val[1];
    if (parseInt(min) > parseInt(max)) {
        min = max;
        max = val[0];
    }
    return what == 'min' ? (isNaN(min) ? null : min) : (isNaN(max) ? null : max);
}
var validator={};
//要用到的正则表达式
validator.reg={
 "english":/^[a-zA-Z0-9_\-]+$/,
    "chinese":/^[\u0391-\uFFE5]+$/,
    "number":/^[-\+]?\d+(\.\d+)?$/,
    "integer":/^[-\+]?\d+$/,
    "float":/^[-\+]?\d+(\.\d+)?$/,
    "date":/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/,
    "email":/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    "url" : /^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
    "phone" : /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
    "mobile" : /^(($\d{2,3}$)|(\d{3}\-))?((13\d{9})|(159\d{8}))$/,
    "ip" : /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/,
    "zipcode": /^[1-9]\d{5}$/,
    "qq" : /^[1-9]\d{4,10}$/,
    "msn" : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    "idcard" : /(^\d{15}$)|(^\d{17}[0-9Xx]$)/
};
//提示信息
validator.tip={
    "unknow":"未找到的验证类型，无法执行验证。",
    "paramError":"参数设置错误，无法执行验证。",
    "required":"不允许为空。",
    "english":"仅允许英文字符及下划线 (a-zA-Z0-9_)。",
    "chinese":"仅允许中文字符。",
    "number":"不是一个有效的数字。",
    "integer":"不是一个有效的整数。",
    "float":"不是一个有效的浮点数。",
    "date":"不是一个有效的日期格式。 (例如：2007-06-29)",
    "email":"不是一个有效的电子邮件格式。",
    "url":"不是一个有效的超链接格式。",
    "phone":"不是一个有效的电话号码。",
    "mobile":"不是一个有效的手机号码。",
    "ip":"不是一个有效的IP地址。",
    "zipcode":"不是一个有效的邮政编码。",
    "qq":"不是一个有效的QQ号码。",
    "msn":"不是一个有效的MSN帐户。",
    "idcard":"不是一个有效的身份证号码。",
 "notSame":"两次输入的内容不一致，请重新输入。"
};
//安装
validator.setup=function(selector)
{
 //var allTags=$(selector+" input,textarea,select");
 //alert(allTags.length);
 validator.selector=selector;
 $(selector+" input,textarea,select").each(
  function()
  {
   $(this).blur(function()
   {
    if(validator.doValidate($(this),validator.feedback))
    {
     validator.OK($(this));
    }
   })
  }
  );
}
//验证全部
validator.validatorAll=function(selector)
{
 var bl=true;
 if(typeof(validator.selector)=="undefined")//如果没有执行validator.setup
  validator.selector=selector;
 $(validator.selector+" input,textarea,select").each(
 function()
 {
  if(validator.doValidate($(this),validator.feedback))
  {
   validator.OK($(this));
  }
  else
   bl=false;
 }
 );
 return bl;
}
//关闭错误提示
validator.OK=function(ele)
{
 ele.next().fadeOut("slow",function(){ele.next().remove();});
 ele.removeClass("alert");
}
//显示错误提示
validator.feedback = function (ele,type) 
{
 var msg = validator.tip[type];
 if(typeof(msg)=="undefined")//type也可以直接是要显示的信息，注意，这个信息不能是tip的key，否则会有歧义
  msg=type;
 ele.addClass("alert");
 if(ele.parent().find(".validator_msgSpan").length>0)
 {
  return;
 }
 var _msgObj=$(' <span class="validator_msgSpan" style="margin-left:2px;display:none;left:0px;  padding:2px;">'+msg+'</span>');
 ele.parent().append(_msgObj);
 _msgObj.fadeIn("slow");
}
//执行验证
validator.doValidate=function(element,feedback)
{
 var v = element.val();
 //alert(v);
 var ControlName=element.attr("controlName");
 //验证是否允许非空
 var required = element.attr('required');
 if (required != null  &&  v.isEmpty()) {
  feedback(element,'required');
  return false;
 }
 //验证是否合法格式
 var dataType = element.attr('dataType');
 if (!v.isEmpty()  &&  dataType != null  &&   dataType.toLowerCase() != 'password') {
  dataType = dataType.toLowerCase();
  try {
   if (!( validator.reg[dataType]).test(v)) {
    feedback(element,dataType);
    return false;
   }
  } catch(e) {
   feedback(element,'unknow');
   return false;
  }
 }
 //执行数据验证
 var confirmObj = element.attr('confirmObj');
 if (confirmObj != null) {
  try {
   var data = $(confirmObj).val();//eval('formObj.' + confirmObj + '.value');
   if (v != data) {
    //alert('两次输入的内容不一致，请重新输入。');
    feedback(element,"notSame");
    return false;
   }
  } catch (e) {
   feedback(element,'paramError');
   return false;
  }
 }
 //验证数字大小
 var dataBetween = element.attr('dataBetween');
 if (!v.isEmpty()  &&  dataBetween != null) {
  var min = dataBetween.getBetweenVal('min');
  var max = dataBetween.getBetweenVal('max');
  if (min == null || max == null) {
   feedback(element,'paramError');
   return false;
  }
  if (!v.isBetween(parseInt(v.trim()), min, max)) {
   feedback(element,ControlName + '必须是介于 ' + min + '-' + max + ' 之间的数字。');
   return false;
  }
 }
 //验证字符长度
 var dataLength = element.attr('dataLength');
 if (!v.isEmpty()  &&  dataLength != null) {
  var min = dataLength.getBetweenVal('min');
  var max = dataLength.getBetweenVal('max');
  if (min == null || max == null) {
   feedback(element,'paramError');
   return false;
  }
  if (!v.isBetween(v.trim().length, min, max)) {
   feedback(element,ControlName + '必须是 ' + min + '-' + max + ' 个字符。');
   return false;
  }
 }
 return true;
}
$(document).ready(setup);
function setup()
{validator.setup("#form1");}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" border="1" cellspacing="0" cellpadding="2" style="font:12px Tahoma">
    <tr>
      <td>密码</td>
      <td>password</td>
      <td><input type="text" name="password" required="required" id="password" controlName="密码" dataType="password" /></td>
    </tr>
    <tr>
      <td>密码确认</td>
      <td>confirmObj</td>
      <td><input type="text" name="confirmObj" controlName="密码确认" confirmObj="#password" /></td>
    </tr>
    <tr>
      <td width="60">英文</td>
      <td width="64">english</td>
      <td width="426"><input type="text" name="english" controlName="英文" dataType="english" dataLength="4,10" />
      4~10个字符</td>
    </tr>
    <tr>
      <td>中文</td>
      <td>chinese</td>
      <td><input type="text" name="chinese" required="required" controlName="中文" />
非空</td>
    </tr>
    <tr>
      <td>数字</td>
      <td>number</td>
      <td><input type="text" name="number" controlName="数字" dataBetween="10,100" />
      大于10，小于100</td>
    </tr>
    <tr>
      <td>整数</td>
      <td>integer</td>
      <td><input type="text" name="integer" controlName="整数" dataType="integer" /></td>
    </tr>
    <tr>
      <td>浮点数</td>
      <td>float</td>
      <td><input type="text" name="float" controlName="浮点数" dataType="float" /></td>
    </tr>
    <tr>
      <td>日期</td>
      <td>date</td>
      <td><input type="text" name="date" controlName="日期" dataType="date" /></td>
    </tr>
    <tr>
      <td>邮件</td>
      <td>email</td>
      <td><input type="text" name="email" controlName="邮件" dataType="email" /></td>
    </tr>
    <tr>
      <td>网址</td>
      <td>url</td>
      <td><input type="text" name="url" controlName="网址" dataType="url" /></td>
    </tr>
    <tr>
      <td>电话</td>
      <td>phone</td>
      <td><input type="text" name="phone" controlName="电话" dataType="phone" /></td>
    </tr>
    <tr>
      <td>手机</td>
      <td>mobile</td>
      <td><input type="text" name="mobile" controlName="手机" dataType="mobile" /></td>
    </tr>
    <tr>
      <td>IP地址</td>
      <td>ip</td>
      <td><input type="text" name="ip" controlName="IP地址" dataType="ip" /></td>
    </tr>
    <tr>
      <td>邮编</td>
      <td>zipcode</td>
      <td><input type="text" name="zipcode" controlName="邮编" dataType="zipcode" /></td>
    </tr>
    <tr>
      <td>QQ号码</td>
      <td>qq</td>
      <td><input type="text" name="qq" controlName="QQ号码" dataType="ip" /></td>
    </tr>
    <tr>
      <td>MSN</td>
      <td>msn</td>
      <td><input type="text" name="msn" controlName="MSN" dataType="msn" /></td>
    </tr>
    <tr>
      <td>身份证</td>
      <td>idcard</td>
      <td><input type="text" name="idcard" controlName="身份证" dataType="idcard" /></td>
    </tr>
    <tr>
      <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 " onclick="return validator.validatorAll()" /></td>
    </tr>
  </table>
</form>
</body>
</html>

相关特效代码

热门特效代码: JavaScript+CSS打造漂亮的select; CSS按钮样式大全; CSS 3D按钮特效; 几个比较好看的Button的CSS; CSS配合htc文件巧妙应用实现反转; 带滑动条的DIV+CSS+JS登录框代码; JS+CSS实现精致、符合标准的表单; 网页常用按钮大全; 下拉菜单特效; 鼠标经过input时变颜色

推荐特效代码: 几个比较好看的Button的CSS; JavaScript+CSS打造漂亮的select; 复制标题和链接，发送给你的好友; CSS自适应宽度按钮; 带滑动条的DIV+CSS+JS登录框代码; 网页放大缩小按钮效果