您好,登錄后才能下訂單哦!
這篇文章主要講解了bootstrapValidator表單校驗、更改狀態(tài)、新增、移除校驗字段的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
注意:jQuery報 Maximum call stack size exceeded
錯誤描述:超出最大調(diào)用堆棧大小
錯誤原因:內(nèi)部形成遞歸
解決方案: html 寫法不規(guī)范,更改 html 寫法,可參考官網(wǎng)示例,或下面代碼。
<!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" >更改校驗狀態(tài)</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('提交成功'); } }); // 改變字段校驗狀態(tài) $('#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(){ // 字段可以處于校驗中,所以先處理校驗狀態(tài) // $('#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>
看完上述內(nèi)容,是不是對bootstrapValidator表單校驗、更改狀態(tài)、新增、移除校驗字段的方法有進一步的了解,如果還想學習更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。