線上書籍

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() 這個函式，很多地方會用到，建議把它移到主樣版，這樣子樣版只要調用即可