11-3 表單驗證

一、 html簡易驗證

1. 簡單的表單驗證，可以考慮使用 HTML5 表單驗證。
2. 相關屬性
   • 必填欄位：required

     <input type="text" required>

   • 限定長度： maxlength、 minlength

     <input type="text" id="text" name="text" minlength="2" maxlength="10">

   • 使用正規表達式進行驗證 ： pattern

     <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

     <input type="number" min="10" max="100">

3. post_form.tpl

   <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
3. 在【 www 】內建目錄【 class 】並將檔案 jQuery-Validation-Engine-3.0.0.zip解壓到目錄【 class】並命名為【formValidator】。
4. 僅留【js】、【css】
   
5. post_form.tpl 引入

   <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，其基本格式如：

   <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：只能用中文字，不能用特殊符號、數字、英文及空白
8. post_form.tpl

     <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>
       <!-- b4-form-check-inline-->
       <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>