--
前言
之前使用 jQuery Validation ，在檢索時看到了一張圖
才知道這是另外一個 jQuery Plugin ，對於預設的設計理念來說，jQuery.validationEngine 的錯誤提醒不會破壞原表單排版，比較不需要糾結表單結構設計，尤其是版面元素較多編排緊湊的情況。
程式範例一次演示多個使用場景
- Bootstrap 的表單套用
- 標準 HTML5 attribute 設定
- 正確驗證後使用 XMLHttpRequest() 送出資料
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<link rel="stylesheet" href="/APP/Component_Front/jQuery-Validation-Engine-master/css/validationEngine.jquery.css"/> <script src="/APP/Component_Front/jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-zh_TW.js"></script> <script src="/APP/Component_Front/jQuery-Validation-Engine-master/js/jquery.validationEngine.js"></script> <form id="idForm" method="post" enctype="multipart/form-data"> <div class="row"> <div class="form-group"> <label for="id_user_name" class="col-sm-offset-1 col-sm-2 control-label">委託人姓名</label> <div class="col-sm-9"> <input type="text" class="form-control" id="id_user_name" name="user_name" placeholder="請輸入委託人姓名" data-validation-engine="validate[required]" autofocus="" /> </div> </div> </div> <div class="row"> <div class="form-group"> <label for="id_tel" class="col-sm-offset-1 col-sm-2 control-label">聯絡電話</label> <div class="col-sm-9"> <input type="text" class="form-control validate[required] " id="id_tel" name="tel" placeholder="請輸入聯絡電話" /> </div> </div> </div> <div class="row"> <div class="form-group"> <label for="id_address" class="col-sm-offset-1 col-sm-2 control-label">地址</label> <div class="col-sm-9"> <input type="text" class="form-control" id="id_address" name="address" placeholder="請輸入正確的地址以方便我們郵寄報紙給您" data-validation-engine="validate[required,minSize[10]]" data-errormessage-range-underflow="10!!!" /> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9 margintop25"> <button type="submit" id="btn-submit" class="btn btn-primary" >修改</button> </div> </div> <input type="hidden" name="mode" value="set" /> </form> <script> $(function(){ $("#idForm").validationEngine("attach",{ onValidationComplete: function(form, status) { if (status == true) { var Selectform = document.querySelector('#idForm'); var fd = new FormData(Selectform); var xhr = new XMLHttpRequest(); xhr.addEventListener("load", uploadComplete, false); xhr.open("POST", "?act=Request&do=UserInfo&t=" + Math.random(),true); xhr.send(fd); } }, promptPosition:"topLeft", scroll:false }); }); </script> |
--
參考資源
--
安裝
使用 CDN 選擇最新版相容性較佳，整理時最新版本是 3.1.0
--
將綁定和驗證分開
使用 attach 和表單綁定，然後使用 validate 驗證表單輸入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$("#idFormTeacherScores").validationEngine('attach',{ custom_error_messages: { 'custom[email]': { 'message': '錯誤的電子郵件格式' } }, validationEventTrigger: '', autoHidePrompt: true, autoHideDelay: 2000, promptPosition:"bottomLeft", validateNonVisibleFields: false, prettySelect: true, scroll:false }); function allSubmit(){ if ( $("#idFormTeacherScores").validationEngine('validate') ) { alert('ddd'); } } |
--
使用 ajax 和 serialize() 送出表單資料
|
|
$.ajax({ url: WebSite +'/?a=Admin/SendEmail&b=TeacherScores', type: 'post', data: $('#idFormTeacherScores').serialize(), success: function(J){ var Json = JSON.parse(J); } }); |
根據參考資料 serialize() 除了可以將表單完整打包之外，還可以進行過濾，例如
|
|
data: $('#idFormAdd').find(':visible, input[type="hidden"]').serialize(), |
只傳輸有顯示的欄位及 type='hidden' 的隱藏欄位
--
最大字數
Limit the number of characters in a textarea
還是沿用 HTML 的 maxlength="10" 設定
中文教程、說明
--
自訂驗證格式 - 以臺灣手機格式為例
jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-zh_TW.js
原來就有手機號碼的驗證方式，不過因為只有語言中文化，所以手機號碼還是驗證外國的，套用在臺灣手機號碼就是失敗，改一下就好了
|
|
"phone": { "regex": /^09([0-9]{8})$/, "alertText": "* 無效的電話號碼，請輸入 09 開頭格式手機號碼" }, |
使用
|
|
<input type="text"name="Phone" data-validation-engine="validate[required,custom[phone]]" placeholder="手機號碼" /> |
--
純數字
|
|
data-validation-engine="validate[required,custom[integer]]" |
--
根據選擇自訂驗證條件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<form id="idFormOpinion" class="form-horizontal"> <div class="form-group"> <label for="idTeacherScores" class="col-sm-2 control-label">評分</label> <div class="col-sm-10"> <select name="TeacherScores" id="idTeacherScores" class="form-control" data-validation-engine="validate[required]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> </div> <div class="form-group"> <label for="idTeacherOpinion" class="col-sm-2 control-label">意見</label> <div class="col-sm-10"> <textarea name="TeacherOpinion" id="idTeacherOpinion" class="form-control" data-validation-engine="validate[funcCall[checkTeacherScores]]"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-2"></div> <div class="col-sm-10"> <input type="submit" class="btn btn-primary" value="儲存"/> </div> </div> </form> |
如果評分小於 7 則必須填寫意見
|
|
// 檢查分數是否低於 7 分 function checkTeacherScores(field, rules, i, options){ var Scores = $('#idFormOpinion').find('[name="TeacherScores"] option:selected').val(); if ( Scores <=7 ){ rules.push('required'); return '請填寫原因'; } } |
表單送出
|
|
$("#idFormOpinion").submit(function(){}).validationEngine({ onValidationComplete: function(form, status) { if (status == true) { // 表單送出處理 } }, validationEventTrigger: '', autoHidePrompt: true, autoHideDelay: 2000, promptPosition:"bottomLeft", validateNonVisibleFields: false, prettySelect: true, scroll:false }); |
--
serialize() 不處理 display:none; 不過還是要送出 input type="hidden"
|
|
$.ajax({ url: './Update', type: 'post', data: $('#idFormEdit').find("input[type='hidden'], :input:not(:hidden)").serialize(), success: function(J){ } }); |
--
2,775 total views, 2 views today