:::

5. 表單驗證

一、利用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"]}」


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

17人線上 (5人在瀏覽線上書籍)

會員: 0

訪客: 17

更多…