Tad 教材網 - 線上書籍

:::

\[1042\] XOOPS模組開發進階
====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/39/2.pdf)

### 一、 表單送出前驗證

1. jQuery Validation Engine官網：<https://github.com/posabsolute/jQuery-Validation-Engine>
2. 在XOOPS模組中套用之（須先載入tadtools/tad\_function.php） ```
  <pre class="brush: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，其基本格式如： ```
  <pre class="brush:xml;">
  <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\[格式\]：驗證各種輸入內容 ```
      <pre class="brush:xml;">
      <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）： ```
  <pre class="brush:php;">
  //信用卡檢查
  /^(?: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. 用法： ```
  <pre class="brush:php;">
  <?php
  $str = 'a1234';
  if (preg_match("/^[a-zA-Z0-9]{4,16}$/", $str)) {
      echo "驗證成功";
  } else {
      echo "驗證失敗";
  }
  ?>
  ```
 
### 二、 欄位直覺點擊編輯

1. jeditable官網：[https://github.com/tuupola/jquery\_jeditable](https://github.com/tuupola/jquery_jeditable)
2. 在XOOPS模組中套用之（須先載入tadtools/tad\_function.php） ```
  <pre class="brush: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) 一般文字框 ```
      <pre class="brush:php;">
      $jeditable->setTextCol("#id名稱", $file, '140px', '12px', "{'sn':$sn,'op' : 'save'}", "點擊編輯");
      ```
  - (2) 大量文字框 ```
      <pre class="brush:php;">
      $jeditable->setTextAreaCol("#id名稱", $file, '500px', '150px', "{'sn':$sn,'op' : 'save'}", "點擊編輯");
      ```
  - (3) 下拉選單 ```
      <pre class="brush:php;">
      $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內容如下： ```
  <pre class="brush: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. 先建立一個搜尋框，如： ```
  <pre class="brush:xml;">
  <input type="text" name="keyword" id="keyword" class="form-control">
  ```
4. 加入基本的jquery語法，其中source是指定比對的資料來源 ```
  <pre class="brush:jscript;">
  $( "#keyword" ).autocomplete({
    source: ["林可芸","林佳屏","王靜怡","謝莉諭","黃紀桓"]
  });
  ```
5. 資料來源可以是陣列（即上例的source\_data）、字串、回呼函式等三種格式。
6. 若是用字串，那必須給一個網址，該網址可以傳回json格式資料的。 ```
  <pre class="brush:jscript;">
  $( "#keyword" ).autocomplete({
     source: "get_name.php"
  });
  ```
7. 使用者輸入的關鍵字，傳到接收網址會接收到$\_GET\['term'\]這個變數，因此，可以利用之，擷取所需資料，並將最後結果轉為json格式傳回。 ```
  <pre class="brush:php;">
  <?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" => $股票代碼 );

:::