茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664615 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
PIMG_00147.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]jquery.validate簡介

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]jquery.validate.js简介 - lee576的专栏 - CSDN博客

參看:http://docs.jquery.com/Plugins/Validation並整理



jquery.validate.js是jquery旗下的一個驗證框架,借助jquery的優勢,我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法,並且對國際化也有很好的支持



使用這個函數很簡單,看以下的代碼



Html代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" 
type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>


總結,我們只要在加入如下的JAVASCRIPT代碼,就可以把指定的FORM加上驗證



Html代碼:
$(document).ready(function(){
   $("#commentForm").validate();
 });
 $(document).ready(function(){
    $("#commentForm").validate();
  });


不過我們還要在需要驗證的INPUT裡面class加入required說明是必填項,其他的就是驗證相關數據比如email就是驗證email的數據結構



以下列出validate自帶的默認驗證
        required: "必選字段",
        remote: "請修正該字段",
        email: "請輸入正確格式的電子郵件",
        url: "請輸入合法的網址",
        date: "請輸入合法的日期",
        dateISO: "請輸入合法的日期 (ISO).",
        number: "請輸入合法的數字",
        digits: "只能輸入整數",
        creditcard: "請輸入合法的信用卡號",
        equalTo: "請再次輸入相同的值",
        accept: "請輸入擁有合法後綴名的字符串",
        maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字符串"),
        minlength: jQuery.format("請輸入一個長度最少是 {0} 的字符串"),
        rangelength: jQuery.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
        range: jQuery.format("請輸入一個介於 {0} 和 {1} 之間的值"),
        max: jQuery.format("請輸入一個最大為 {0} 的值"),
        min: jQuery.format("請輸入一個最小為 {0} 的值")




validate ()的可選項



debug:進行調試模式
$(".selector").validate({
  debug: true
})
把調試設置為默認
$.validator.setDefaults({
  debug: true
})




submitHandler:用其他方式替代默認的SUBMIT,比如用AJAX的方式提交
$(".selector").validate({   \
  submitHandler: function(form) {
	  $(form).ajaxSubmit();
  }
})




ignore:忽略某些元素不驗證
$("#myform").validate({
  ignore: ".ignore"
})


rules: 默認下根據form的classes, attributes, metadata判斷,但也可以在validate函數里面聲明

Key/value 可自定義規則. Key是對象的名字 value是對象的規則,可以組合使用 class/attribute/metadata rules.

以下代碼特別驗證selector類中name='name'是必填項並且 email是既是必填又要符合email的格式
$(".selector").validate({
  rules: {
		// simple rule, converted to {required:true}
		name: "required",
		// compound rule
		email: {
		  required: true,
			email: true
		}
  }
})




messages:更改默認的提示信息
$(".selector").validate({
  rules: {
	  name: "required",
		email: {
		  required: true,
			email: true
		}
  },
	messages: {
	  name: "Please specify your name",
		email: {
		  required: "We need your email address to contact you",
			email: "Your email address must be in the format of name@domain.com"
		}
	}
})




groups:定義一個組,把幾個地方的出錯信息同意放在一個地方,用errorPlacement控制把出錯信息放在哪裡
$("#myform").validate({
  groups: {
	  username: "fname lname"
  },
	errorPlacement: function(error, element) {
	  if (element.attr("name") == "fname" || element.attr("name") == "lname" )
		  error.insertAfter("#lastname");
	  else
		  error.insertAfter(element);
	},
	debug:true
})


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lee576/archive/2008/12/03/3439072.aspx
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]jquery validate 插件的使用_Web开发_网站设计_烈火网



一、下載地址和Demo

http://jquery.bassistance.de/validate/jquery.validate.zip

首頁: http://bassistance.de/jquery-plugins/jquery-plugin-validation/



二、默認校驗規則

(1)required:true 必輸字段
(2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗證格式,不驗證有效性
(7)number:true 必須輸入合法的數字(負數,小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法後綴名的字符串(上傳文件的後綴)
(12)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
(13)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10




三、默認的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},


如需要修改,可在js代碼中加入:
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法後綴名的字符串",
maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),
min: jQuery.validator.format("請輸入一個最小為 {0} 的值")
});


推薦做法,將此文件放入messages_cn.js中,在頁面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>




四、使用方式

1.將校驗規則寫到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});

<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">確認密碼</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>


使用class="{}"的方式,必須引入包:jquery.metadata.js

可以使用如下的方法,修改提示內容:
class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"


在使用equalTo關鍵字時,後面的內容必須加上引號,如下代碼:
class="{required:true,minlength:5,equalTo:'#password'}"


另外一個方式,使用關鍵字:meta(為了元數據使用其他插件你要包裝 你的驗證規則 在他們自己的項目中可以用這個特殊的選項)

Tell the validation plugin to look inside a validate-property in metadata for validation rules.

例如:
meta: "validate"
<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />


再有一種方式:
$.metadata.setType("attr", "validate");


這樣可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"將不起作用



文章源自:烈火网,原文:http://www.liehuo.net/a/200912/0911378.html

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]中華民國身份證字號驗證程式 – 使用 jQuery.Validate « YORKXIN×YORKXIN

[作品] 中華民國身份證字號驗證程式 – 使用 jQuery.Validate

最近在研究 jQuery.Validate,這是可以讓你做出「表單還沒送出前就先驗證資料是否正確」效果的 Plug-in,如果網站的 JavaScript 已經採用 jQuery 當作 Library 的話,那麼直接導入 jQuery.Validate 是比較容易的。類似的 Library 如 LiveValidation

示範網頁在這裡;因為 WordPress 不讓我放 Embedded Javascript,所以就到另一個網頁看吧。

做法很簡單:先導入 jQuery.Validate,然後針對要輸入身份證字號的地方,撰寫兩個自定的 Validate 條件,一個是檢驗它是否符合 /^[A-Z]{1}[1-2]{1}[0-9]{8}$/ 的 Regular Expression,另一個是 透過算數方式檢查它是否符合邏輯。

首先導入 jQuery 及 jQuery.Validate,這個應該不用多說:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.validate.js"></script>

以下是一個範例的表單,表單的id不能省略,input的id也不能省略:


  <form id="citizenid_validation" action="some_action.php" method="get">
    <input type="text" name="citizenid" value="" id="citizenid">
  </form>

接著在 JavaScript 裡定義兩個驗證方案,一個是驗證它是否符合 /^[A-Z]{1}[1-2]{1}[0-9]{8}$/ 的 Regular Expression:


  $(document).ready (function () {
    /* user_citizenid regex method */
    jQuery.validator.addMethod("ROC_Citizen_ID_regex",
      function(citizenid, element) {
        citizenid = citizenid.replace(/\s+/g, "");
        return (
            this.optional(element) ||
            /^[A-Z]{1}[1-2]{1}[0-9]{8}$/.test(citizenid)
          );
      }, "格式有誤"
    );
  });

另一個是以算數方式檢驗:


  $(document).ready (function () {
    jQuery.validator.addMethod("ROC_Citizen_ID_arithmetic",
      function(citizenid, element) {
          var local_table = [10,11,12,13,14,15,16,17,34,18,19,20,21,
                             22,35,23,24,25,26,27,28,29,32,30,31,33];
                         /* A, B, C, D, E, F, G, H, I, J, K, L, M,
                            N, O, P, Q, R, S, T, U, V, W, X, Y, Z */
        var local_digit = local_table[citizenid.charCodeAt(0)-'A'.charCodeAt(0)];
        var checksum = 0;
        checksum += Math.floor(local_digit / 10);
        checksum += (local_digit % 10) * 9;
        /* i: index; p: permission value */
        /* this loop sums from [1] to [8] */
        /* permission value decreases */
        for (var i=1, p=8; i <= 8; i++, p--)
        {
          checksum += parseInt(citizenid.charAt(i)) * p;
        }
        checksum += parseInt(citizenid.charAt(9));    /* add the last number */
        return (
            this.optional(element) || !(checksum % 10)
          );
      }, "似乎偽造"
    );
  });

最後,把 jQuery.Validate 的規則綁定到表單元件 (form element) 就行了:


  $(document).ready(function () {
    $("#citizenid_validation").validate ({
      success: function(label) {
        label.text("正確")
      },
      rules: {
        citizenid: {
          required: true,
          ROC_Citizen_ID_regex: true,
          ROC_Citizen_ID_arithmetic: true
        }
      }
    });
  });

當然這三件事可以放在同一個 $(document).ready( function () {/*裡面*/})

by the way, 事實上「 身份證字號產生器」是很好寫的,反正前 9 個字可以隨便寫,透過算數方法就可以算出最後一個數字是多少。不信的話,你把前面 9 個字隨便亂填,第 10 個字從 0 到 9 都試試看,一定有一個是正確的…

警告本文描述內容僅為學術研究用途,使用非本人的身份證字號 是犯法的


原文出處: [作品] 中華民國身份證字號驗證程式 – 使用 jQuery.Validate « YORKXIN×YORKXIN
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]jQuery教學-jQuery.validate萬用表單驗證元件直接套用


jQuery教學-jQuery.validate萬用表單驗證元件直接套用


梅問題-jQuery教學-jQuery.validate萬用表單驗證外掛直接套用   今天不管是製作留言回應加入會員訂購表單....等,都脫離不了表單的驗證,來預防有心人士隨便亂打、亂填,盡收到一堆不完整、不正確的資料, 以前梅干都是用javascript來作驗證有值就好,但近來發現到若有人故意在欄位中,輸入空白就可通過驗證,如此一來就會收到一堆空白的會員資料或留言,真梅干感到頭痛,於是請教了好友男丁,有無好的解決辦法,哈~真不虧是老級的,馬上就丟了一個jQuery外掛jQuery.validate表單驗證,完全不用寫任何的程式,只要指定要驗證的欄位就可以了,不然光想到要用正規表示法,梅干手腳都軟了。


jQuery.validate


外掛名稱:jQuery.validate

外掛版本:1.6

官網下載:
http://jquery.bassistance.de/validate/jquery.validate.zip


放在<head>.....</head>之間:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//須與form表單ID名稱相同
	$("#commentForm").validate();
});
</script>



放在<body>.....</body>之間:
<form class="cmxform" id="commentForm" method="post" action="(script removed)alert('完成');">
	<fieldset>
		<legend> 星號為必填欄位 
		</legend>
		<p>
			<label for="cname">姓名(*)
			</label>
			<input id="cname" name="name" class="required" minlength="2" />
			<p>
				<label for="cemail">Email(*)
				</label>
				<input id="cemail" name="email" class="required email" />
			</p>
			<p>
				<label for="curl">URL
				</label>
				<input id="curl" name="url" class="url" value="" />
			</p>
			<p>
				<label for="phone">聯絡電話
				</label>
				<input id="phone" name="phone" class="digits" value="" />
			</p>
			<p>
				<label for="ccomment">回應 (*)
				</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
			</p>
			<p>
				<input class="submit" type="submit" value="送出"/>
			</p>
			</fieldset>
</form>



語法解說:


若要驗證欄位,只要將參數加在class標籤下就可以了,如要混用只要在每個參數後方空一格,隔開即可,可用參數如下:

required:必填欄位

email:格式要符合E-Mail格式

url:格式要符合網址格式,如:http://www.minwt.com

number:數字格包含小數點

digits:數字為正整數

date:日期格式

dataISO:日期格式,格式必需為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD

equalTo:與某一欄位值相同



minValue:最小字元長度

maxValue:最大字元長度

rangeValue:字元長度區間長度



minLength:最小字元長度(漢字算一個字符)

maxLength:最大字元長度(漢字算一個字符)

rangeLength:字元長度區間長度(漢字算一個字符)


修改提示詞:


利用記事本開啟js/
jquery.validate.js
,找到257行底下就是所有錯誤的提示訊息,各位可依需求自行更改。


梅問題-jQuery教學-jQuery.validate萬用表單驗證外掛直接套用

  jQuery.validate這隻表單驗證的功能相當強大與完整,而梅干只整理平常較常使用到的部分,各位若有其它更進一步的需求,可直接下載jQuery.validate的完整套件,裡面有提供各式各樣的表單驗證範例可參考,而只要善用一些外掛元件,將可省去不少開發時間,jQuery.validate真得很酷。

原文出處:jQuery教學-jQuery.validate萬用表單驗證元件直接套用 | ♣梅問題‧教學網【Minwt】♣
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]客户端验证的极品--jQuery.validator



最近在做一個用戶註冊登錄的頁面,資料查尋過程中發現了一個非常不錯的客戶端驗證的極品-jQuery.validate。

它是著名的JavaScript包jQuery的一個插件,其實它還有其它的一些插件應該都爽,有待慢慢來學習



官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jQuery用戶手冊:http://jquery.org.cn/visual/cn/index.xml



開發使用起來非常簡單明瞭,

我的代碼:

$(document).ready(function(){

/* 設置默認屬性 */
$.validator.setDefaults({
  submitHandler: function(form) { form.submit(); }
});
// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  var length = value.length;
  for(var i = 0; i < value.length; i++){
   if(value.charCodeAt(i) > 127){
    length++;
   }
  }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "請確保輸入的值在3-15個字節之間(一個中文字算2個字節)");

/* 追加自定義驗證方法 */
// 身份證號碼驗證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
  return this.optional(element) || isIdCardNo(value);
}, "請正確輸入您的身份證號碼");

// 字符驗證
jQuery.validator.addMethod("userName", function(value, element) {
  return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用戶名只能包括中文字、英文字母、數字和下劃線");

// 手機號碼驗證
jQuery.validator.addMethod("isMobile", function(value, element) {
  var length = value.length;
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
}, "請正確填寫您的手機號碼");

// 電話號碼驗證
jQuery.validator.addMethod("isPhone", function(value, element) {
  var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
  return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼");

// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
  var tel = /^[0-9]{6}$/;
  return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
$(regFrom).validate({
/* 設置驗證規則 */
  rules: {
   userName: {
    required: true,
    userName: true,
    byteRangeLength: [3,15]
   },
   password: {
    required: true,
    minLength: 5
   },
   repassword: {
    required: true,
    minLength: 5,
    equalTo: "#password"
   },
   question: {
    required: true
   },
   answer: {
    required: true
   },
   realName: {
    required: true
   },
   cardNumber: {
    isIdCardNo: true
   },
   mobilePhone: {
    isMobile: true
   },
   phone: {
    isPhone: true
   },
   email: {
    required: true,
    email: true
   },
   zipCode: {
    isZipCode:true
   }
  },
/* 設置錯誤信息 */
  messages: {
   userName: {
    required: "請填寫用戶名",
    byteRangeLength: "用戶名必須在3-15個字符之間(一個中文字算2個字符)"
   },
   password: {
    required: "請填寫密碼",
    minlength: jQuery.format("輸入{0}.")
   },
   repassword: {
    required: "請填寫確認密碼",
    equalTo: "兩次密碼輸入不相同"
   },
   question: {
    required: "請填寫您的密碼提示問題"
   },
   answer: {
    required: "請填寫您的密碼提示答案"
   },
   realName: {
    required: "請填寫您的真實姓名"
   },
   email: {
    required: "請輸入一個Email地址",
    email: "請輸入一個有效的Email地址"
   }
  },
/* 錯誤信息的顯示位置 */
  errorPlacement: function(error, element) {
   error.appendTo( element.parent() );
  },
/* 驗證通過時的處理 */
  success: function(label) {
   // set   as text for IE
   label.html(" ").addClass("checked");
  },
/* 獲得焦點時不驗證 */
  focusInvalid: false,
  onkeyup: false
});

// 輸入框獲得焦點時,樣式設置
$('input').focus(function(){
  if($(this).is(":text") || $(this).is(":password"))
   $(this).addClass('focus');
  if ($(this).hasClass('have_tooltip')) {
   $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
  }
});

// 輸入框失去焦點時,樣式設置
$('input').blur(function() {
  $(this).removeClass('focus');
  if ($(this).hasClass('have_tooltip')) {
   $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
  }
});
});




網上的資料有人說,它跟prototype包會有衝突,我還沒有同時使用過,這點不是很清楚,但我是發現一個問題:

對於最小/大長度的驗證方法,作者可能考慮到大家的命名習慣不同,同時做了minLength和minlength(maxLength和maxlength)方法,應該哪一個都是可以的,但對於用戶Message來說,只能夠定義針對minlength(maxlength),才能調用用戶自定義的Message,

否則只是調用包的默認Message,但具體原因還沒有查清楚。同時,這個插件提供了本地化的消息,但對於我這裡初學者來說,怎麼使用它還有待摸索!



bluespring:

極品嗎!!!

粗略看了下,貌似比較複雜。基於jQuery的驗證插件早就有了。一直在用感覺比你這個簡單好用。

formValidate

http://www.yhuan.com/formvalidator/index.html


原文出處:客户端验证的极品--jQuery.validator - JQuery - web - JavaEye论坛
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]jQuery plugin: Validation的詳細使用



jQuery plugin: Validation的詳細使用

最近愛上了jquery,

所以很多的頁面都拿它來使用,

由於它有很多的plus,今天就先來介紹最常用到的jquery.validate.js,

官方的網址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

引用的網址:http://wangwangliujun.spaces.live.com/blog/

說明如下:

官網的例子裡引用了幾個js和css文件,但只需引用jquery.validate.js這一個文件即可.

貼個簡單的例子:

$('#EditView').validate({
  event: "keyup",
	rules:{
	  name:{required:true},
		cosa_commodity_group_list:{required:true}
	},
	submitHandler:function(){
	  $("#group_list > option").attr("selected","selected");
		$(this).submit();
	}
});


1.event是觸發校驗的方式,可選值有keyup(每次按鍵時),blur(當控件失去焦點時),不使用這個參數時就只在按提交按鈕時觸發

2.如果在提交前還需要進行一些自定義處理使用submitHandler參數,其它的都比較簡單,自己看看API就成了.

3.debug,如果這個參數為true,那麼表單不會提交,只進行檢查,調試時十分方便.

4.rules,所有的檢驗規則都寫在這個參數里面.

校驗規則參數

格式為: name : {rule1,rule2,...} 經過測試,用input標籤的id是沒有效果的,必須使用input標籤的name
             (1) required: true            必輸
             (2) number: true            只能輸入數字(包括小數)
             (3) digits:true                只能輸入整數
             (4) minValue: 3              不能小於3
             (5) maxValue: 100          最大不超過100
             (6) rangeValue:[50,100]  值範圍為50-100
             (7) minLength: 5            最小長度(漢字算一個字符)
             (8) maxLength:   10       最大長度(漢字算一個字符)
             (9) rangeLength:[5,10]   長度範圍為5至10位(漢字算一個字符)
             (10) 上面的minLength, maxLength, rangeLength 這三項除了text input之外還可以用於checkbox,select這兩種控件
             (11) email:true               電子郵件
             (12) equalTo: "#field"      與#field值相同
             (13) dateISO:true          日期型,格式為1998/01/22            1999-12-12

required: true| false |(表達式)|(函數)
還可以是表達式和函數,函數返回true表示required有效,false表示required無效,
返回【""】空對像表示true,返回【"  "】和【"wangwang"】等非空的對象為false


5.messages,自定義錯誤信息,格式與rules類似,需要注意的是如果使用此項,那麼所有的校驗項都必需自定義出錯信息,如果只想定義其中的某一些,那麼就把其它的出錯信息定義為空(即""),系統即會使用默認值。
messages {
  password: {
	  required: "請輸入您的密碼.",
		minLength: "密碼不能小於5位.",
		maxLength: "密碼不能長於32位."
  },


如何自定義校驗規則:

可以通過自定義檢驗函數的方式新增加校驗規則,步驟如下:

1. 在定義校驗規則之前定義一個新的方法

2. 在rules中指定這個某個域使用此校驗規則

3. 在messages中指定這個域使用此校驗規則沒有通過的提示信息
//這裡定義了一個名為equal的規則
//value是指當前校驗域的值
//element是指當前檢驗的域
//param是指在rules中設定的參數
//這三個參數會在進行校驗時由系統自動帶入
$.validator.methods.equal = function(value, element, param){
  //在這裡使用上面的三個參數進行校驗
	if(value == param)
	  return true;//如果當前域的值等於指定的參數就通過校驗};
};
$('#form1').validate({
	rules:{
    field1:{equal:20}//在這裡指定field1的檢驗規則是equal,並且參數是20
  },
	messages:{
	  field1:{equal:'您的计算有误!'}//在這裡定義field1的equal規則校驗出錯後的提示信息
	}
});


將校驗規則寫到控件中

有時候我們的控件是動態生成的,這個時候就不可能提前先寫好校驗規則,需要在生成控件的同時寫校驗規則.

這樣寫校驗規則有兩種寫法,一是將規則寫到class屬性中,二是將規則寫到單獨的validate屬性中,其中:

寫到class屬性的寫法如下,例子中在規則前添加了名為some, other, styles 的三個class:
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" class="{required:true}"></textarea>


第二種寫法如下,使用自定義的validata屬性,但必需加載jquery.metadata.js這個文件
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />


原文出處:jQuery plugin: Validation的詳細使用-網頁設計的藝術 網動-新浪部落
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[分享]jQuery Validation如何使用Ajax驗證!
很多地方都有提到jQuery-Validation的『remote』!
例如:
 remote: {
    url: "ajax/validateUserName.action",     //後台處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據,默認已傳遞應用此規則的表單項
        email: function() {
            return $("#email").val();
        }
    }

注意:remote是遠程驗證:比如註冊驗證用戶名是否已被註冊,返回值只能是true(驗證成功)或false(驗證失敗)。 

可是,那個『dataType: "json"』雖然已經成為標準了,但無緣無故(真有這麼大量的資料要傳輸,要用到json!?)為啥要去用她!?

而且,大多數的範例,都不是以php為基礎所寫,頂多就是像上面一樣有提到『返回值只能是true(驗證成功)或false(驗證失敗)』。
但這裡的返回值是return嗎?當然不是!web身為stateless的範本,當然沒啥return可以用!
所以,這裡要用echo!

另外,如果你有特殊的資料要傳遞,要怎麼辦呢?
大家的範例都很一致的告訴你用data來傳資料進去!
這個更好笑,如果走get method的話,本來的資料欄位jQuery名稱就會自己幫我們帶過去了!
那一堆範例又在給妳個
email: function() {return ("#email").val();}

是在幹啥呢!?根本是耍寶!
這裡的用法,應該是要把你要傳入的資料更名!
簡單的說,就是讓你的後台可以用同一個變數名稱接前台各種資料欄位!
大家看看後面的範例,應該就懂了,不管是cycle_check_envelopes_01或是cycle_check_pages_01冷日都用「number」這個變數名傳給後端的Ajax程式『testAjaxValidator.php』接,也就是說,後端的php只要去($_REQUEST["number"])就好啦!

最後,還有一個慘痛經驗要告訴大家。
本來冷日就是不想用『dataType: "json"』而開啟這一連串測試。
所以冷日本來很直覺得相信其他網站改用「dataType: "html"」,導致一切悲劇的開始!
反正,後來經測試,不管用Get Method或是Post Method,那個dataType都可以不用給(也不要給,反而容易出亂子)就可以一切正常運作!

來看看冷日的範例吧。
前端JS:
<script type="text/javascript">
//$.validator.setDefaults({ debug: true });
$(document).ready(function() {
	$("#FucoCheckEditForm").validate({		//別忘了FormName要對應ㄚ!
//	  debug	: true , 
	  rules	: {
		cycle_check_envelopes_01	: {
			required	: true , 
			remote: {
			    url: "/test/testAjaxValidator.php",     //後台處理程序
			    type: "POST",               //數據發送方式
			    cache: false,
//			    dataType: "html",           //接受數據格式
			    data: {                     //要傳遞的數據
			        number: function() {
			            return $("#cycle_check_envelopes_01").val();
			        }
			    }
			}
		},
		cycle_check_pages_01	: {
			required	: true , 
			remote: {
			    url: "/test/testAjaxValidator.php",     //後台處理程序
			    type: "POST",               //數據發送方式
			    cache: false,
//			    dataType: "html",           //接受數據格式
			    data: {                     //要傳遞的數據
			        number: function() {
			            return $("#cycle_check_pages_01").val();
			        }
			    }
			}
		}
	  },
	  submitHandler: function() {
	  	alert("檢查完成,可以送出!");
//		this.submit();
	  }
	});
	$(".cancel").click(function() {
		validator.resetForm();
	});
});
</script>


後端php:
<?php
$request = intval($_REQUEST["number"]);
//sleep(2);//這是給那些Loading Image作測試用低
//usleep(150000);//這是給那些Loading Image作測試用低
$valid = 'false';
if ( ($request % 2) == 0 ) {
	$valid = 'true';
}
echo $valid;
?>


有沒有簡單易懂ㄚ,下課!
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|