[jQuery Plugin] 第一次用jQuery Validator就上手

常用到的客戶端的表單欄位驗證，在此簡單記錄一下：
本測試使用v1.8.1

範例:
首先匯入需要的js(jquery.core.js為jQuery函式庫)

<script type="text/javascript" src="../js/plugins/jquery.core.js"></script>
<script type="text/javascript" src="../js/plugins/jquery.validate.js"></script>

初始化驗證器，有許多options可以使用，
在此簡單加了一條rules,message,submitHandler
Tip:校驗的元素請一定要設name的屬性

<script>
 $(function(){
  $("#registerForm").validate({
    rules:{
     username:{
         required: true,
  maxlength: 20,
  minlength:3
     },
     password:{
        required : true,
 minlength:4,
 maxlength:20
    },
    retypepwd: {
        required: true,
        equalTo: $("#password")
     },
    email:{
 required : true,
 email:true
    },
    submitHandler: function(form) {
       //console.log("do other stuff for a valid form");
       form.submit();
    }
  });
 });
 </script>

<form id="registerForm" method="post">
 <p>
  <label for="username">username(*)</label> 
  <input id="username"  name="username" class="required" minlength="5" /> 
 </p>
 <p>
  <label for="password">password(*)</label> 
  <input id="password" name="password" class="required " minlength="4" /> 
 </p>
 <p>
  <label for="retypepwd">retype-password(*)</label> 
  <input id="retypepwd" name="retypepwd" class="required " minlength="4" /> 
 </p>
 <p>
  <label for="email">Email(*)</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

rules 內建的校驗規則
請參考官方文件:http://docs.jquery.com/Plugins/Validation#Validator

custom rules 自訂校驗規則

//新增自訂的校驗規則
$.validator.addMethod( "alphabetnumber" , function(value,element){

var re = /^[a-zA-Z0-9]+$/g;

return value.match(re);

});

//使用自訂的alphabetnumber校驗規則
rules:{ password:{ required : true, minlength:4, maxlength:20, alphabetnumber:true }

//使用自訂的校驗訊息
messages :
{
 //password is input element id in the from password:
password:
{ required: "請輸入您的密碼.",
 minlength: "密碼不能小於4字元.",
 maxlength: "密碼不能長於20字元",
 alphabetnumber:"只能輸入英文與數字"
 }
}

custom messages 自訂校驗訊息
自定義錯誤信息，格式與rules類似。需要注意的是如果使用此項，那麼所有的校驗項都必需自定義出錯信息，如果只想定義其中的某一些，那麼就把其它的出錯信息定義為空（即""），系統即會使用默認值。

messages :{
         //password is input element id in the from 
         password: {
            required: "請輸入您的密碼."
            minlength: "密碼不能小於5位.",
            maxlength: "密碼不能長於32位."
         }
}

position of error message of custom 自訂校驗訊息顯示位置(2011/9/21)
如果你想變更錯誤訊息的顯示位置你可以使用errorPlacement來覆寫
error: 錯誤訊息元素
element:校驗元素

errorPlacement:function(error, element){
        //判斷你要是否為你要變更位置的元素
if($(element).attr("name") == "user_search"){
if(element.parent().next().attr("class") == "error"){
element.parent().next().remove();
}
//重新插入錯誤訊息的位置
error.css("display","block").insertAfter(element.parent());

}
},


Reset form and error message of rules重設表單與校驗錯誤訊息(2011/9/21)

//初始化請另外用一個變數儲存整個validate物件
var v = $("#yourfrom").validate();
// code to reset form 
$("#yourfrom").resetForm(); 

動態變更錯誤訊息(2012/04/03)

 $.validator.addMethod( "passwordrule" , function(value,element){
  var re =   /^[a-zA-Z0-9@%\\+\/'!#$\^\?:\(\)\{\}\[\]~\-_]+$/g;
  var searchStr = value;
  var reElse = /[^a-zA-Z0-9@%\\+\/'!#$\^\?:\(\)\{\}\[\]~\-_]{1}/g;
  var result = searchStr.match(reElse);
  if(result != null){
   //console.log("invalid chars:" + result.toString());
   //dynamic setting message
   this.settings.messages[element.name].passwordrule 
    = $.printf(global_validate_only_passwordrule,[result.toString()]);
  }
  return value.match(re);
 });

Reference:
jQuery Validate 詳細使用說明
jquery-plugin-validation
http://khaidoan.wikidot.com/jquery-validation