bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

时间：2021-05-28

注意：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(){ // $('#inputForm').bootstrapValidator('updateStatus', 'xm', 'NOT_VALIDATED'); // 或 $('#inputForm').data('bootstrapValidator').updateStatus('xm', 'NOT_VALIDATED'); }); // 增加校验字段 $('#btn3').on('click', function(){ // 或 $('#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表单校验、更改状态、新增、移除校验字段的实例代码的文章就介绍到这了,更多相关bootstrapvalidator表单校验内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章