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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
js css自定义分页效果
Feb 24 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 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
PHP 事务处理数据实现代码
2010/05/13 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP静态文件生成类实例
2014/11/29 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python中的闭包实例详解
2014/08/29 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
经销商会议欢迎词
2014/01/11 职场文书
校园绿化美化方案
2014/06/08 职场文书
单位消防安全责任书
2014/07/23 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Java死锁的排查
2022/05/11 Java/Android