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

Google 自訂搜尋

Goole 廣告

隨機相片
PIMG_00084.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

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

討論區主頁 - 主題一覽 > 網頁設計 > [轉貼]jquery.validate簡介
討論串 | 最新的先
前一個主題 | 下一個主題 | 頁尾
主題一覽的上方
發表者 討論內容
冷日
(冷日)		 發表時間：2010/3/11 7:21
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]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
回覆
冷日
(冷日)		 發表時間：2010/3/11 7:26
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]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
回覆
冷日
(冷日)		 發表時間：2010/3/11 7:52
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]中華民國身份證字號驗證程式 – 使用 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
回覆
冷日
(冷日)		 發表時間：2010/3/11 8:31
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]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】♣
回覆
冷日
(冷日)		 發表時間：2010/3/11 8:37
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]客户端验证的极品--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论坛
回覆
冷日
(冷日)		 發表時間：2010/3/11 8:45
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]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: "密碼不能小於５位.",
		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的詳細使用-網頁設計的藝術 網動-新浪部落
回覆
冷日
(冷日)		 發表時間：2010/3/31 11:40
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[分享]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|