9-5 formValidator 表單驗證

• 解壓縮後，將 css 及 js 兩個資料夾複製到 htdocs 中。
• 中文語系檔下載，解壓縮後請放至 js/languages 中

1.加入以下語法：

<link rel='stylesheet' href='css/validationEngine.jquery.css' type='text/css' media='screen' charset='utf-8' />

<link rel='stylesheet' href='css/template.css' type='text/css' media='screen' title='no title' charset='utf-8' />
<script src='js/jquery-1.6.min.js' type='text/javascript'></script><!--端視之前有無引入 jquery-->
<script src='js/languages/jquery.validationEngine-tw.js' type='text/javascript'></script>
<script src='js/jquery.validationEngine.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $('#myform').validationEngine({
        inlineValidation: true,
        success :  false,
        failure : function() {}
    });
});
</script>

    (1) 提示的位置：「promptPosition: "topRight", 」選項有：topLeft, topRight, bottomLeft,  centerRight, bottomRight

    (2) 是否邊輸入邊檢查：「inlineValidation: true,」

2.表單要做的變化：記得在<form>中加入id="myform"，要對應上面的$("#myform")。

在欄位中加入參數：<input name='id' type='text' id='id' class='validate[required , custom[onlyLetter] , length[0,10]]'>

• optional：非必填，當有填入值才會觸發驗證機制
• required：必填欄位用
• custom[]：自訂驗證
  • phone：電話格式
  • url：網址格式
  • email：驗證email 規則
  • date：日期格式驗證，格式一律為YYYY-MM-DD
  • number：只能填數字
  • integer：只能填整數
  • ipv4：只能填ip格式
  • onlyNumberSp：只能填入數字及空白
  • onlyLetterSp:：只能填入字元及空白
  • onlyLetterNumber:：只能填入數字、字元及空白
• length[0,20]：只允許~20個字元之間
• maxCheckbox[5]：最多可核選5個
• minCheckbox[2]：最多可核選2個
• confirm[欄位名稱]：和另一個欄位進行比對（常用於密碼）
• equals[欄位 id]：檢查值是否和另一個欄位一樣

4.單選鈕的寫法：<input name="sex" type="radio" value="男" class="validate[required] radio">

5.複選鈕的寫法：<input name="hobby" type="checkbox" id="hobby" value="琴" class="validate[minCheckbox[2]] checkbox">