JQuery validation (1)

Web上的Form Validation實在有相當多種，而各種Web Framework也都各自提供了Validation的基本功能，改用不同的Framework也通常代表要新學一種Validation的機制。
再以一個Form看來，雖說看起來可以重覆使用，但實際上同一個Form物件或Model在查尋、新增、修改時所需要的Validation條件通常都不盡相同，為此還需要客製不同的Action設定以供分辨，所以個人覺得比較好的方式是利用JavaScript的solution來處理，一則是易懂，一則是容易通用。

JQuery validation 就是一個非常方便的工具，雖說JQuery官方的JQuery UI也有Formular可以使用，但由於接觸JQuery validation較早，而且也沒有特別的問題，也就一直延用下來。
JQuery validation的官網是：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

JQuery基本上有兩種使用方式，
第一種是在input中間使用class與其他attributes來指定要用的validation

<script language="JavaScript">
<!--
$().ready(function() {
 $("#myForm").validate();
});
-->
</script>   

<input name="age" class="required number" maxlength="3" type="text" id="age" /> 

第二種是直接設定validtaion的rules

<script language="JavaScript">
<!--
$().ready(function() {
 $("#myForm").validate({
  rules : {
   age : {required:true, number:true}
  }
 });
});
-->
</script> 

基本所提供的validation有

• required:必填欄位，範例：required:true
• remote:使用遠端系統其他API來檢核，範例：remote : {url:"my.do", type:"post" data:{param1: function(){return $("#inputField").val();}}}
• minlength:最小資料長度，範例：minlength:2
• maxlength:最大資料長度，範例：maxlength:10
• rangelength:資料長度區間，範例：rangelength:[2,10]
• min:最小值，範例：min:2
• max:最大值，範例：max:20
• range:資料區間，範例：range:[2,20]
• email:是否符合email格式，範例：email:true
• url:是否符合url格式，範例：url:true
• date：是否符合日期格式，此格式為20/08/2010，僅有格式而已....，範例：date:true
• dateISO:是否符合國際日期格式，此格式為2010/08/20，僅有格式而已....，範例：dateISO:true
• number:資料是否為數字類，可輸入小數，範例：number:true
• digits:資料是否為整數，範例：digits:true
• accept:用以檢查副檔名，範例：accept: "xls|csv"
• equalTo:檢查兩欄位值是否相同，範例：equalTo:"#password"

JQuery validation也提供多語系的支援，修改它所提供在localization中的message_xx.js，然後include到你的頁面即可。