Tad 教材網 - 線上書籍

:::

PHP入門講義
=======

- 解壓縮後，將 css 及 js 兩個資料夾複製到 htdocs 中。
- [中文語系檔下載](http://www.tad0616.net/uploads/tad_book3/file/jquery_validationEngine-tw.zip)，解壓縮後請放至 js/languages 中
 
1.加入以下語法：

<span style="color: rgb(51, 102, 255);"><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' />  
 <strike><span style="color: rgb(128, 128, 128);"><script src='js/jquery-1.6.min.js' type='text/javascript'></script></span></strike>  
 <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() {  
 $('<span style="color: rgb(255, 0, 0);">\#myform</span>').validationEngine({  
 inlineValidation: true,  
 success : false,  
 failure : function() {}  
 });  
 });  
 </script></span>

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

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

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

在欄位中加入參數：<input name='id' type='text' <span style="color: rgb(0, 0, 255);">id='id'</span> <span style="color: rgb(255, 0, 0);">class='validate\[required , custom\[onlyLetter\] , length\[0,10\]\]'</span>>

- 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">

:::