Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

### 一、 html簡易驗證

1. 簡單的表單驗證，可以考慮使用 HTML5 表單驗證。
2. 相關屬性 
  - <span class="tlid-translation translation" lang="zh-TW">必填欄位：required</span> 
      ```markup
      <input type="text" required>
      ```
      
       <span class="tlid-translation translation" lang="zh-TW"></span>
  - 限定長度： maxlength、 minlength 
      ```markup
      <input type="text" id="text" name="text" minlength="2" maxlength="10">
      ```
  - 使用正規表達式進行驗證 ： pattern 
      ```markup
      <input type="text" name="end" id="end" class="form-control" value="{$content.end}" placeholder="到期日 YYYY-MM-DD" pattern="{literal}(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31)){/literal}" required>
      ```
  - 限定範圍： min 與 max 
      ```markup
      <input type="number" min="10" max="100">
      ```
3. post\_form.tpl 
  ```markup
  <div class="form-group">
      <label for="title">待辦事項</label>
      <input type="text" name="title" id="title" class="form-control" placeholder="待辦事項" value="{$content.title}" minlength="1" maxlength="10" required>
    </div>
    
   
    <div class="form-group">
      <label for="title">到期日</label>
      <input type="text" name="end" id="end" class="form-control" value="{$content.end}" placeholder="到期日 YYYY-MM-DD" pattern="{literal}(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31)){/literal}" required>
    </div>
  ```
 
### 二、 利用jQuery Validation Engine進行表單驗證

1. jQuery Validation Engine官網：<https://github.com/posabsolute/jQuery-Validation-Engine>
2. 下載：[jQuery-Validation-Engine-3.0.0](https://github.com/posabsolute/jQuery-Validation-Engine/archive/v3.0.0.zip)
3. 在【 www 】內建目錄【 class 】並將檔案 [jQuery-Validation-Engine-3.0.0.zip](http://120.115.2.101/~jaile/uploads/tad_book3/file/jQuery-Validation-Engine-3.0.0.zip)解壓到目錄【 class】並命名為【formValidator】。
4. 僅留【js】、【css】  
   ![](http://120.115.2.101/~jaile/uploads/tad_book3/image/xoops_046.png)
5. post\_form.tpl 引入 
  ```markup
  <link rel="stylesheet" href="../class/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="../class/formValidator/css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
  <script src="../class/formValidator/js/languages/jquery.validationEngine-zh_TW.js" type="text/javascript"></script>
  <script src="../class/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>
  ```
6. 檢查表單id名稱，例如：<form id="myForm">
7. 在欲套用驗證的欄位把參數加入class中（注意，一個欄位不可以有兩個class，但class中可以套用許多值，用空白隔開），且該欄位必須有設定id，其基本格式如： 
  ```markup
  <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\[格式\]：驗證各種輸入內容 
      ```markup
      <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：只能用中文字，不能用特殊符號、數字、英文及空白
8. post\_form.tpl 
  ```markup
    <div class="form-group">
      <label for="title">待辦事項</label>
      <input type="text" name="title" id="title" class="form-control validate[required,, min[1], max[10]]" placeholder="待辦事項" value="{$content.title}">
    </div>
    
    
    <div class="form-group">
      <label for="title">到期日</label>
      <input type="text" name="end" id="end" class="form-control validate[required , custom[date]]" value="{$content.end}" onClick="WdatePicker({literal}{dateFmt:'yyyy-MM-dd',startDate:'%y-%M-%d',minDate:'%y-%M-%d'}{/literal})" placeholder="到期日YYYY-MM-DD">
    </div>
    
    
  <div class="form-group">
      <label for="assign">指派對象</label>
      
      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input class="form-check-input validate[minCheckbox[1]]" type="checkbox" name="assign[]" id="assign_0" value="爸爸" {if "爸爸"|in_array:$content.assign_arr}checked="checked"{/if}>爸爸
        </label>
        <label class="form-check-label">
          <input class="form-check-input validate[minCheckbox[1]" type="checkbox" name="assign[]" id="assign_1" value="媽媽" {if "媽媽"|in_array:$content.assign_arr}checked="checked"{/if}>媽媽
        </label>
        <label class="form-check-label">
          <input class="form-check-input validate[minCheckbox[1]" type="checkbox" name="assign[]" id="assign_2" value="哥哥" {if "哥哥"|in_array:$content.assign_arr}checked="checked"{/if}>哥哥
        </label>
        <label class="form-check-label">
          <input class="form-check-input validate[minCheckbox[1]" type="checkbox" name="assign[]" id="assign_3" value="妹妹" {if "妹妹"|in_array:$content.assign_arr}checked="checked"{/if}>妹妹
        </label>
        <label class="form-check-label">
          <input class="form-check-input validate[minCheckbox[1]" type="checkbox" name="assign[]" id="assign_4" value="我" {if "我"|in_array:$content.assign_arr}checked="checked"{/if}>我
        </label>
      </div>
  </div>
  ```

MarkDown