如何将bootstrapValidator表单校验、状态更改、新增和移除功能整合为一个长尾词？

2026-04-03 10:291阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计765个文字，预计阅读时间需要4分钟。

如何将bootstrapValidator表单校验、状态更改、新增和移除功能整合为一个长尾词？

注意：jQuery 报错 + Maximum call stack size exceeded + 错误描述：超出最大调用栈大小 + 错误原因：内部形成递归 + 解决方案：检查 HTML 写法，修改 HTML 写法，参考官方示例或下方代码。

注意：jQuery报 Maximum call stack size exceeded

错误描述：超出最大调用堆栈大小

错误原因：内部形成递归

解决方案：html 写法不规范，更改 html 写法，可参考官网示例，或下面代码。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet"> <link href="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="img.558idc.com/uploadfile/allimg/210405/193I4A41-0.jpg"></script> <script src="img.558idc.com/uploadfile/allimg/210405/193I45225-1.jpg"></script> <script src="img.558idc.com/uploadfile/allimg/210405/193I460V-2.jpg"></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表单校验、更改状态、新增、移除校验字段的实例代码的文章就介绍到这了,更多相关bootstrapvalidator表单校验内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！

标签：bootstrapValidator 表单校验更改