14. 表單頁面(二)

jQuery Validation - 表單驗證工具

1. 它是基於jquery的套件，故必須先引入jquery.js，我們主樣版已經引入
2. 這裡希望針對 必填、email、網址、數字，做驗證
3. 未來在結構 form_validate 會設置一個複選 必填|email|網址|數字，管理設定好之後，程式在樣版可以自動處理

安裝

1. 引入CSS、JS

   
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_zh_TW.min.js"></script>

    

2. 修正 CSS

   
   <style>
     .error{
       color:red;
     }
   </style>

    

3. 調用函式
   客戶名稱我們將四種驗證都執行，故實際測試時，記得留 必填 即可，看看送出畫面是否出現

   <script>
     $(function() {
       $("#myForm").validate({
         submitHandler: function(form) {              //驗證成功執行
           $('#submit').attr('disabled', true);       //關閉送出
           setIdAttribute('main-content', 'd-none');  //關閉主畫面
           setIdAttribute('show', 'my-5');            //開啟loading畫面
           insertData();                              //寫入函式
           document.getElementById('myForm').reset(); //表單重置
           return false;
         },
         rules: {                                     //規則
           "title": {                                 //表單 name
             "required": true,                        //必填
             "email": true,                           //email
             "url": true,                             //網址
             "number": true                           //數字
           }
         },
         messages: {                                  //訊息
           "title": {                                 //表單 name
             "required": "必填",                      //必填
             "email": "Email格式不正確",              //email
             "url": "網址格式不正確",                 //網址
             "number": "數字格式不正確"               //數字
           }
         }
       });
     });
   
     /*===================================
       寫入函式
     ===================================*/
     function insertData() {
       alert('寫入函式');
     }
     
     /*===============================
     指定 id -> class
     setIdAttribute('main-content','');      //開啟主畫面
     setIdAttribute('show','d-none');        //關閉等待畫面
   
     setIdAttribute('main-content','d-none');//關閉主畫面
     setIdAttribute('show','my-5');          //開啟等待畫面
     ===============================*/ 
     function setIdAttribute(id, elementClass){
       document.getElementById(id).setAttribute("class", elementClass);
     }
   </script>

   
    
4. setIdAttribute() 這個函式，很多地方會用到，建議把它移到主樣版，這樣子樣版只要調用即可