这篇文章主要讲解了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表单校验、更改状态、新增、移除校验字段的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。