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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python中str.join()简单用法示例
2018/03/20 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python打开使用的方法
2019/09/30 Python
使用python实现画AR模型时序图
2019/11/20 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python实现飞行棋游戏
2020/02/05 Python
python中数据库like模糊查询方式
2020/03/02 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
2014年财务人员工作总结
2014/11/11 职场文书
护士年终考核评语
2014/12/31 职场文书
社区敬老月活动总结
2015/05/07 职场文书
民间借贷借条如何写
2015/05/26 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
vue实现移动端div拖动效果
2022/03/03 Vue.js