通用的表單驗證代碼

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={};
//要用到的正則表達(dá)式
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":"未找到的驗證類型，無法執(zhí)行驗證。",
    "paramError":"參數(shù)設(shè)置錯誤，無法執(zhí)行驗證。",
    "required":"不允許為空。",
    "english":"僅允許英文字符及下劃線 (a-zA-Z0-9_)。",
    "chinese":"僅允許中文字符。",
    "number":"不是一個有效的數(shù)字。",
    "integer":"不是一個有效的整數(shù)。",
    "float":"不是一個有效的浮點數(shù)。",
    "date":"不是一個有效的日期格式。 (例如：2007-06-29)",
    "email":"不是一個有效的電子郵件格式。",
    "url":"不是一個有效的超鏈接格式。",
    "phone":"不是一個有效的電話號碼。",
    "mobile":"不是一個有效的手機(jī)號碼。",
    "ip":"不是一個有效的IP地址。",
    "zipcode":"不是一個有效的郵政編碼。",
    "qq":"不是一個有效的QQ號碼。",
    "msn":"不是一個有效的MSN帳戶。",
    "idcard":"不是一個有效的身份證號碼。",
 "notSame":"兩次輸入的內(nèi)容不一致，請重新輸入。"
};
//安裝
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")//如果沒有執(zhí)行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;
}
//關(guān)閉錯誤提示
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 id="u2ynvc2"    class="validator_msgSpan" style="margin-left:2px;display:none;left:0px;  padding:2px;">'+msg+'</span>');
 ele.parent().append(_msgObj);
 _msgObj.fadeIn("slow");
}
//執(zhí)行驗證
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;
  }
 }
 //執(zhí)行數(shù)據(jù)驗證
 var confirmObj = element.attr('confirmObj');
 if (confirmObj != null) {
  try {
   var data = $(confirmObj).val();//eval('formObj.' + confirmObj + '.value');
   if (v != data) {
    //alert('兩次輸入的內(nèi)容不一致，請重新輸入。');
    feedback(element,"notSame");
    return false;
   }
  } catch (e) {
   feedback(element,'paramError');
   return false;
  }
 }
 //驗證數(shù)字大小
 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 + ' 之間的數(shù)字。');
   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>密碼確認(rèn)</td>
      <td>confirmObj</td>
      <td><input type="text" name="confirmObj" controlName="密碼確認(rèn)" 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>數(shù)字</td>
      <td>number</td>
      <td><input type="text" name="number" controlName="數(shù)字" dataBetween="10,100" />
      大于10，小于100</td>
    </tr>
    <tr>
      <td>整數(shù)</td>
      <td>integer</td>
      <td><input type="text" name="integer" controlName="整數(shù)" dataType="integer" /></td>
    </tr>
    <tr>
      <td>浮點數(shù)</td>
      <td>float</td>
      <td><input type="text" name="float" controlName="浮點數(shù)" 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>網(wǎng)址</td>
      <td>url</td>
      <td><input type="text" name="url" controlName="網(wǎng)址" dataType="url" /></td>
    </tr>
    <tr>
      <td>電話</td>
      <td>phone</td>
      <td><input type="text" name="phone" controlName="電話" dataType="phone" /></td>
    </tr>
    <tr>
      <td>手機(jī)</td>
      <td>mobile</td>
      <td><input type="text" name="mobile" controlName="手機(jī)" 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>

相關(guān)特效代碼

熱門特效代碼: JavaScript+CSS打造漂亮的select; CSS按鈕樣式大全; CSS 3D按鈕特效; 幾個比較好看的Button的CSS; CSS配合htc文件巧妙應(yīng)用實現(xiàn)反轉(zhuǎn); 帶滑動條的DIV+CSS+JS登錄框代碼; JS+CSS實現(xiàn)精致、符合標(biāo)準(zhǔn)的表單; 網(wǎng)頁常用按鈕大全; 下拉菜單特效; 鼠標(biāo)經(jīng)過input時變顏色

推薦特效代碼: 幾個比較好看的Button的CSS; JavaScript+CSS打造漂亮的select; 復(fù)制標(biāo)題和鏈接，發(fā)送給你的好友; CSS自適應(yīng)寬度按鈕; 帶滑動條的DIV+CSS+JS登錄框代碼; 網(wǎng)頁放大縮小按鈕效果