線上書籍

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

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

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

    (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 規則

        f.date : 日期格式驗證，格式一律為YYYY-MM-DD

    (4) length[0,20]：只允許~20個字元之間

    (5) maxCheckbox[5]：最多可核選5個

    (6) minCheckbox[2]：最多可核選2個

    (7) confirm[欄位名稱]：和另一個欄位進行比對（常用於密碼）

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

二、即時進行帳號驗證

1.在該欄位驗證中加入：,ajax[ajaxUser]，此名稱在jquery.validationEngine-tw.js中定義

2.驗證用的檔名需要在jquery.validationEngine-tw.js中修改

3.驗證用的php檔寫法請參考：mem_chk.php，驗證用的php檔會接收到的值：

    (1) 變數名稱：$_POST['validateId'];（例如：id）

    (2) 變數值：$_POST['validateValue'];（例如：tad）

    (3) 使用的驗證名稱：$_POST['validateError'];（例如：ajaxUser）

4.驗證用的php檔，不管過程為何，最後只要能輸出「{"jsonValidateReturn":["變數名稱","使用的驗證名稱","結果"]}」即可，如：

    (1) 帳號可使用：「{"jsonValidateReturn":["id","ajaxUser","true"]}」

    (2) 帳號不可使用：「{"jsonValidateReturn":["id","ajaxUser","false"]}」