Tad 教材網 - 線上書籍

:::

4-2 電話簿+垂直捲軸

5-1 mem.php next

\[982\]PHP網站開發 進階應用技巧
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9802/05.zip)

### 一、利用jqoery的formValidator進行表單驗證

官方網站：<http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/>

<font color="#3366ff"><link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />  
 <link rel="stylesheet" href="formValidator/css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />  
   
 <script src="formValidator/js/jquery.js" type="text/javascript"></script>  
 <script src="formValidator/js/jquery.validationEngine-tw.js" type="text/javascript"></script>  
 <script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 $(document).ready(function() {  
 $("#myform").validationEngine({  
 inlineValidation: true,  
 success : false,  
 failure : function() {}  
 });  
 });  
 </script></font>

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

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

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

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

(1) optional：非必填，當有填入值才會觸發驗證機制

(2) required：必填欄位用

(3) custom\[\]：自訂驗證

a.onlyNumber : 只能填數字

b.noSpecialCaracters :禁止填入特殊符號

c.onlyLetter : 只能填入大小寫英文字

d.telephone : 驗證電話號碼規則

e.email : 驗證email 規則