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


Posted in Javascript onMay 19, 2020

注意: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表单校验、更改状态、新增、移除校验字段的实例代码的文章就介绍到这了,更多相关bootstrapvalidator表单校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
如何提高数据访问速度
Dec 26 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vuex与组件联合使用的方法
May 10 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
单线程JavaScript实现异步过程详解
May 19 #Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 #Javascript
JS使用for in有序获取对象数据
May 19 #Javascript
基于js实现数组相邻元素上移下移
May 19 #Javascript
Node.js API详解之 zlib模块用法分析
May 19 #Javascript
You might like
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Python实现冒泡排序的简单应用示例
2017/12/11 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python-接口开发入门解析
2019/08/01 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python3 re返回形式总结
2020/11/20 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
校园门卫岗位职责
2013/12/09 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
电视新闻稿
2015/07/17 职场文书
教师节主题班会方案
2015/08/17 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书