溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了bootstrapValidator表單校驗、更改狀態、新增、移除校驗字段的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
注意：jQuery報 Maximum call stack size exceeded
錯誤描述：超出最大調用堆棧大小
錯誤原因：內部形成遞歸
解決方案： html 寫法不規范，更改 html 寫法，可參考官網示例，或下面代碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>validate</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <form id="inputForm"> <div class="form-group"> <label class="col-lg-4 control-label">姓名</label> <div class="col-lg-8"> <input type="text" class="form-control" name="xm" /> </div> </div> <div class="form-group"> <label class="col-lg-4 control-label">性別</label> <div class="col-lg-8"> <input type="text" class="form-control" name="xb" /> </div> </div> <div class="form-group"> <label class="col-lg-4 control-label">年齡</label> <div class="col-lg-8"> <input type="text" class="form-control" name="nl" /> </div> </div> </form> <div class="row"> <button id="btn1" class="btn btn-primary" >提交</button> <button id="btn2" class="btn btn-primary" >更改校驗狀態</button> <button id="btn3" class="btn btn-primary" >增加校驗字段</button> <button id="btn4" class="btn btn-primary" >移除校驗字段</button> <button id="btn5" class="btn btn-primary" >重置表單校驗</button> </div> </div> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> <script> $(function(){ var formValidator = function(){ $('#inputForm').bootstrapValidator({ fields:{ xm:{ validators:{ notEmpty:{ message: '姓名不能為空' } } }, xb:{ validators:{ notEmpty:{ message: '性別不能為空' } } } } }); } formValidator(); // 提交表單 $('#btn1').on('click', function(){ var bootstrapValidator = $('#inputForm').data('bootstrapValidator'); bootstrapValidator.validate(); if(bootstrapValidator.isValid()){ alter('提交成功'); } }); // 改變字段校驗狀態 $('#btn2').on('click', function(){ /* NOT_VALIDATED 未校驗的 VALIDATING 校驗中的 INVALID 校驗失敗的 VALID 校驗成功的 */ // $('#inputForm').bootstrapValidator('updateStatus', 'xm', 'NOT_VALIDATED'); // 或 $('#inputForm').data('bootstrapValidator').updateStatus('xm', 'NOT_VALIDATED'); }); // 增加校驗字段 $('#btn3').on('click', function(){ /*$('#inputForm').bootstrapValidator('addField', 'nl', { validators:{ notEmpty:{ message: '年齡不能為空' } } });*/ // 或 $('#inputForm').data('bootstrapValidator').addField('nl', { validators:{ notEmpty:{ message: '年齡不能為空' } } }); }); // 移除校驗字段 $('#btn4').on('click', function(){ // 字段可以處于校驗中，所以先處理校驗狀態 // $('#inputForm').bootstrapValidator('updateStatus', 'xm', 'NOT_VALIDATED'); // $('#inputForm').bootstrapValidator('removeField', 'xm'); // 或 $('#inputForm').data('bootstrapValidator').updateStatus('xm', 'NOT_VALIDATED'); $('#inputForm').data('bootstrapValidator').removeField('xm'); }); // 重置表單校驗 $('#btn5').on('click', function(){ $('#inputForm').bootstrapValidator('resetForm', true); // 或 //$('#inputForm').data('bootstrapValidator').resetForm(true); }); }); </script> </html>
看完上述內容，是不是對bootstrapValidator表單校驗、更改狀態、新增、移除校驗字段的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
