線上書籍

Home

[1042] XOOPS模組開發進階

一、 表單送出前驗證
  1. jQuery Validation Engine官網:https://github.com/posabsolute/jQuery-Validation-Engine
  2. 在XOOPS模組中套用之(須先載入tadtools/tad_function.php) //套用formValidator驗證機制 if(!file_exists(TADTOOLS_PATH."/formValidator.php")){ redirect_header("index.php", 3, _TAD_NEED_TADTOOLS); } include_once TADTOOLS_PATH."/formValidator.php"; $formValidator = new formValidator("#myForm", true); $formValidator_code = $formValidator->render(); $xoopsTpl->assign("formValidator_code",$formValidator_code);
  3. 在樣板中套入該JS設定,如:<{$formValidator_code}>
  4. 表單必須加入id名稱,例如:<form id="myform">
  5. 在欲套用驗證的欄位把參數加入class中(注意,一個欄位不可以有兩個class,但class中可以套用許多值,用空白隔開),且該欄位必須有設定id,其基本格式如: <input type="text" name="num" id="num" class="validate[required, min[1], max[10]]">  
    • (1)  equals[field.id]:等於某欄位
    • (2)  min[float]:最小值、max[float]:最大值
    • (3)  minSize[integer]:最小字數、maxSize[integer]:最大字數
    • (4)  past[NOW or a date]:日期是否小於指定日期
    • (5)  future[NOW or a date]:日期是否大於指定日期
    • (6)  minCheckbox[integer]:至少選幾個、maxCheckbox[integer]:最多選幾個
    • (7)  custom[格式]:驗證各種輸入內容 <input type="text" name="mail" id="mail" class="validate[required , custom[email]]">
      • a. phone:電話
      • b. url:網址
      • c. email:Email
      • d. date:日期 YYYY-MM-DD
      • e. number:數字,如:-143.22 or .77 but also +234,23
      • f. integer:整數,如:-635 +2201 738
      • g. ipv4:IP,如:127.0.0.1
      • h. onlyNumber:僅數字、onlyNumberSp:僅數字及空白
      • i. onlyLetter:僅字元、onlyLetterSp:僅字元及空白
      • j. onlyLetterNumber:僅字元和數字,無空白
      • k. onChineseSp:只能用中文字及空白,不能用特殊符號、數字、英文
      • l. onChinese:只能用中文字,不能用特殊符號、數字、英文及空白
  6. 後端的檢查,常用的PHP語法:
    • mb_strlen($文字,'編碼') 檢查字數
    • checkdate(月,日,年)
  7. 常用的正規表達式(資料來源 http://blog.hsdn.net/1391.html): //信用卡檢查 /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6011[0-9]{12}|622((12[6-9]|1[3-9][0-9])|([2-8][0-9][0-9])|(9(([0-1][0-9])|(2[0-5]))))[0-9]{10}|64[4-9][0-9]{13}|65[0-9]{14}|3(?:0[0-5]|[68][0-9])[0-9]{11}|3[47][0-9]{13})*$/ //檢查字串只能有文字與數字 /^[a-zA-Z0-9]*$/ //檢查字串只能有文字 /^[a-zA-Z]*$/ //檢查字串只能有數字 /^[0-9]*$/ //檢查日期型態 (MM/DD/YYYY) /^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/ //檢查日期型態 (YYYY/MM/DD) #^((19|20)?[0-9]{2}[- /.](0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01]))*$# //簡易的Email檢查 /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/ //檢查IP位址 /^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/ //檢查密碼:密碼長度必須有八碼,並且包含至少一個小寫字母與一個大寫字母和一個數字 /^(?=^.{8,}$)((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.*$/ //檢查網址 /^(((http|https|ftp):\/\/)?([[a-zA-Z0-9]\-\.])+(\.)([[a-zA-Z0-9]]){2,4}([[a-zA-Z0-9]\/+=%&_\.~?\-]*))*$/
  8. 用法: <?php $str = 'a1234'; if (preg_match("/^[a-zA-Z0-9]{4,16}$/", $str)) { echo "驗證成功"; } else { echo "驗證失敗"; } ?>
二、 欄位直覺點擊編輯
  1. jeditable官網:https://github.com/tuupola/jquery_jeditable
  2. 在XOOPS模組中套用之(須先載入tadtools/tad_function.php) include_once XOOPS_ROOT_PATH."/modules/tadtools/jeditable.php"; $file="save.php"; $jeditable = new jeditable(); //此處加入欲直接點擊編輯的欄位設定 $jeditable_set=$jeditable->render(); $xoopsTpl->assign("jeditable_set",$jeditable_set);
  3. 在樣板中套入該JS設定,如:<{$jeditable_set}>
  4. 「加入欲直接點擊編輯的欄位設定」共有三種欄位可以加入:
    • (1)  一般文字框 $jeditable->setTextCol("#id名稱", $file, '140px', '12px', "{'sn':$sn,'op' : 'save'}", "點擊編輯");
    • (2)  大量文字框 $jeditable->setTextAreaCol("#id名稱", $file, '500px', '150px', "{'sn':$sn,'op' : 'save'}", "點擊編輯");
    • (3)  下拉選單 $jeditable->setSelectCol("#id名稱", $file, "{'值1':'選項文字1' , '值2':'選項文字2' , 'selected':'預設值'}", "{'sn' : $sn , 'op' : 'save'}", "點擊編輯");
  5. 第一個參數是欲編輯的元件id,此id同時會送出給php當作變數名稱(類似name)
  6. 第一個參數$file用來指定檔案,如save.php以用來儲存使用者輸入後的值,而save.php會接收到什麼呢?以上例來說,會接收到四個變數如下:
    • (1)  $_POST['id'] => 'name';  //指定的id值
    • (2)  $_POST['value'] => '黃XX';  //使用者輸入的值
    • (3)  $_POST['sn'] => '2';   //額外傳送的變數
    • (4)  $_POST['op'] => 'save';    //額外傳送的變數
  7. 利用接收到的變數,可以撰寫save.php內容如下: <?php include "header.php"; $sql = "update " . $xoopsDB->prefix("phone_book") . " set `{$_POST['id']}`='{$_POST['value']}' where sn='{$_POST['sn']}'"; $xoopsDB->queryF($sql); echo $_POST['value']; save.php執行後所echo的值會出現在該元件中。
  8. 第三個參數則是欲帶到save.php的額外變數值,以{}包起來,每組變數的格式為「變數名稱:變數值」,每組變數用 , 隔開。
  9. 下拉選單若是從資料庫撈出陣列,可利用json_encode(陣列) 函數將之變成所需選項格式,但必須將裡面的雙引號變成單引號才行。可用str_replace('搜尋','取代',$字串)函數來處理之。
三、 autocomplete 自動完成功能
  1. 官網:https://jqueryui.com/autocomplete/
  2. 這是Jquery UI內建的功能,在使用前,可以在模組中輸入:get_jquery(true);系統即會自動載入jquery ui等相關檔案。
  3. 先建立一個搜尋框,如: <input type="text" name="keyword" id="keyword" class="form-control">
  4. 加入基本的jquery語法,其中source是指定比對的資料來源 $( "#keyword" ).autocomplete({ source: ["林可芸","林佳屏","王靜怡","謝莉諭","黃紀桓"] });
  5. 資料來源可以是陣列(即上例的source_data)、字串、回呼函式等三種格式。
  6. 若是用字串,那必須給一個網址,該網址可以傳回json格式資料的。 $( "#keyword" ).autocomplete({ source: "get_name.php" });
  7. 使用者輸入的關鍵字,傳到接收網址會接收到$_GET['term']這個變數,因此,可以利用之,擷取所需資料,並將最後結果轉為json格式傳回。 <?php include_once "../../mainfile.php"; $sql = "select `name` from `" . $xoopsDB->prefix("phone_book") . "` where `name` like '%{$_GET['term']}%'"; $result = $xoopsDB->query($sql); while (list($name) = $xoopsDB->fetchRow($result)) { $arr[] = $name; } $json = json_encode($arr); echo $json;
  8. 如果輸入的資料和選項是不同但有關連的,例如,輸入股票代碼,下拉選單會出現股票名稱的情形,那麼其陣列格式必須像底下這樣,再轉為json格式輸出即可:
  9. $arr[] = array("label" => $股票名稱, "value" => $股票代碼 );