当前位置: 开发笔记 > 前端 > 正文

bootstrapValidator如何验证最大值和最小值限制

作者：520TING小妖 | 来源：互联网 | 2022-02-28 20:07

本篇文章给大家介绍一下bootstrapValidator验证最大值最小值范围限制的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

一种办法是，在callback中加上该方法，对这个字段从新进行效验，但是两个需要校验的都需要加，就造成了无限循环，

//从新验证该字段
$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).revalidateField(&＃39;nMax&＃39;);

可以自己获取两个字段的值，手动进行比较，当符合验证规则，手动修改该字段的验证状态

$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMax", "VALID", null );

两个值框进行对比

	$("#form").bootstrapValidator({
		message: &＃39;This value is not valid&＃39;,
		feedbackIcons: {
			valid: &＃39;glyphicon glyphicon-ok&＃39;,
			invalid: &＃39;glyphicon glyphicon-remove&＃39;,
			validating: &＃39;glyphicon glyphicon-refresh&＃39;
		},
		
		fields: {
			nMin:{
				validators:{
					notEmpty:{
						message:&＃39;最小值不能为空&＃39;
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: &＃39;请输入有效的值&＃39;
                    },
					callback: {
						message: &＃39;最小值不可大于最大值&＃39;,
						callback: function(value, validator) {
							if(value != &＃39;&＃39;){
							 	var nMax = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMax&＃39;);
								if(nMax.val()!=&＃39;&＃39; && Number(nMax.val())  Number(value)){
									//从新验证该字段
									//$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).revalidateField(&＃39;nMax&＃39;);
									 
									//当符合规则手动修改该字段的验证状态
									/* 因为上面方法两个字段相互验证 ，会造成死循环，所以在两个字段比较之后，并且符合验证规则，就手动修改该字段的验证状态 */
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMax", "VALID", null );
									return true;
								}else if(nMax.val()==&＃39;&＃39;){
									return true;
								}else{
									return true;
								}
							}else{
							 	return true;
							{
							 
						}
					}
				}
			},
			nMax:{
				validators:{
					notEmpty:{
						message:&＃39;最大值不能为空&＃39;
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: &＃39;请输入有效的值&＃39;
                    },
					callback: {
						message: &＃39;最大值不可小于最小值&＃39;,
						callback: function(value, validator) {
							if(value != &＃39;&＃39;){
							 	var nMin = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMin&＃39;);
								if(nMin.val()!=&＃39;&＃39; && Number(nMin.val())>Number(value)){
									return false;
								}else if(nMin.val()!=&＃39;&＃39; && Number(nMin.val())三个值进行比较
nMin:{
				validators:{
					notEmpty:{
						message:"最小值不能为空"
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: &＃39;请输入有效的值&＃39;
                    },
					callback: {
						callback: function(value, validator) {
							var nSetVal = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nSetVal&＃39;);
							var nMax = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMax&＃39;);
							 
							//最小值大于设定值
							if( nSetVal.val()!=&＃39;&＃39; && Number(nSetVal.val()) = Number(value) ){
								
								if( Number(nMax.val()) = Number(value) && Number(nMax.val()) >= Number(nSetVal.val()) ){
									 
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nSetVal", "VALID", null );
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMax", "VALID", null );
									return true;
									 
								//最小值 小于设定值  大于最大值 
								}else{
									return true;
								}
								 
							}else{
								return true;
							}
							 
						}
					}
				}
			},
			nSetVal:{
				validators:{
					notEmpty:{
						message:&＃39;设定值不能为空&＃39;
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: &＃39;请输入有效的值&＃39;
                    },
					callback: {
						callback: function(value, validator) {
							 
							var nMin = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMin&＃39;);
							var nMax = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMax&＃39;);
							 
							//设定值小于最小值
							if( nMin.val()!=&＃39;&＃39; && Number(nMin.val()) > Number(value) ){
								 
								return { message:&＃39;设定值不可小于最小值&＃39;, flag:false };
								
							//设定值 大于 最大值
							}else if( nMax.val()!=&＃39;&＃39; && Number(nMax.val()) = Number(value) ){
								 
								 
								if( nMin.val()!=&＃39;&＃39; && Number(nMin.val()) > Number(value)){
									 
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMax", "VALID", null );	
									return { message:&＃39;设定值不可小于最小值&＃39;, flag:false };
									 
								//设定值 大于最小值 小于最大值   符合全部要求
								}else if( nMin.val()!=&＃39;&＃39; && Number(nMin.val()) <= Number(value) && Number(nMax.val()) >= Number(value) ){
									 
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMax", "VALID", null );
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMin", "VALID", null );
									return true;
									 
								}else{
									return true;
								}
								 
							}else{
								return true;
							}
						}
					}
				}
			},
			nMax:{
				validators:{
					notEmpty:{
						message:"最大值不能为空"
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: &＃39;请输入有效的值&＃39;
                    },
					callback: {
						callback: function(value, validator) {
							var nMin = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nMin&＃39;);
							var nSetVal = $("#form").data("bootstrapValidator").getFieldElements(&＃39;nSetVal&＃39;);
							 
							//最小值大于最大值
							if( nMin.val()!=&＃39;&＃39; && Number(nMin.val()) > Number(value) ){
								 
								return { message:&＃39;最大值不可小于最小值&＃39;, flag:false };
								
							//设定值 大于 最大值
							}else if( nSetVal.val()!=&＃39;&＃39; && Number(nSetVal.val()) > Number(value) ){
								 
								$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMin", "VALID", null );
								return { message:&＃39;最大值不可小于设定值&＃39;, flag:false };
								 
							//最小值 小于 最大值
							}else if( nMin.val()!=&＃39;&＃39; && Number(nMin.val()) <= Number(value) ){
									 
								if(nSetVal.val()!=&＃39;&＃39; && Number(nSetVal.val()) > Number(value)){
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMin", "VALID", null );
									return { message:&＃39;最大值不可小于设定值&＃39;, flag:false };
									 
								//最小值 小于最大值 设定值 小于最大值   符合全部要求
								}else if( nSetVal.val()!=&＃39;&＃39; && Number(nSetVal.val()) <= Number(value) && Number(nSetVal.val()) >= Number(nMin.val()) ){
									 
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nSetVal", "VALID", null );
									$(&＃39;#form&＃39;).data(&＃39;bootstrapValidator&＃39;).updateStatus("nMin", "VALID", null );
									return true;
									 
								//最小值 小于最大值 设定值 大于最大值
								}else{
									return true;
								}
								 
							}else{
								return true;
							}
						}
					}
				}
			}
bootstrapValidator 常用的验证
//不为空验证
notEmpty: {
     message: &＃39;必须输入或者必须选择&＃39;
}

//正整数验证
digits : {
    message : &＃39;字段必须是正整数&＃39;
}

//内容最小值验证
greaterThan: {
    value : 1，
    message : &＃39;最小输入1&＃39;
}

//内容最大值验证
lessThan: {
    value : 100
    message : &＃39;最大输入100&＃39;
}

//正则验证
regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: &＃39;正则验证，这里验证只能输入大小写字母数字和下划线&＃39;
}

//内容长度验证
stringLength : {
    min : 2,
    max : 25,
    message : &＃39;长度2-25位字符&＃39;
}

//回调验证
callback: {
    message: &＃39;请输入整数&＃39;,
	callback: function(value, validator) {	
			//可以return   true  /  false
			//return  false；
			//也可以这样
			return { message:&＃39;最小值不可大于最大值&＃39;, flag:false };
	}
}

//日期验证
date: {
  	format: &＃39;YYYY/MM/DD&＃39;,
    message: &＃39;日期无效&＃39;
}

//数字验证
digits: {
    message: &＃39;该值只能包含数字。&＃39;
}

//ajax验证
threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
    url: &＃39;exist2.do&＃39;,//验证地址
    message: &＃39;用户已存在&＃39;,//提示消息
    delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
    type: &＃39;POST&＃39;//请求方式
 }
 
//复选框验证
choice: {
  	min: 2,
    max: 4,
    message: &＃39;请选择2-4项&＃39;
}

//密码确认
identical: {
	field: &＃39;confirmPassword&＃39;,
    message: &＃39;The password and its confirm are not the same&＃39;
}
更多编程相关知识，请访问：编程视频！！
以上就是bootstrapValidator如何验证最大值和最小值限制的详细内容，更多请关注其它相关文章！

推荐阅读

json
ppurl

Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]

蜡笔小新 2023-10-17 18:30:39
上传
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
js
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
js
Java后台Jsonp处理方法及其应用场景

本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]

蜡笔小新 2023-12-10 10:55:21
js
bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...

查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ... [详细]

蜡笔小新 2023-10-17 19:40:17
json
工作经验谈之-让百度地图API调用数据库内容及详解

这段时间，所在项目中要用到的一个模块，就是让数据库中的内容在百度地图上展现出来，如经纬度。主要实现以下几点功能：1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]

蜡笔小新 2023-10-17 19:33:18
json
Centos7.6安装Gitlab教程及注意事项

本文介绍了在Centos7.6系统下安装Gitlab的详细教程，并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时，还强调了使用阿里云服务器时的特殊配置需求，以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]

蜡笔小新 2023-12-14 14:01:06
json
如何用UE4制作2D游戏文档——计算篇

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-14 09:50:34
json
使用在线工具jsonschema2pojo根据json生成java对象

本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具，用户只需将json字符串复制到输入框中，即可自动将其转换成java对象。该工具还能解析列表式的json数据，并将嵌套在内层的对象也解析出来。本文以请求github的api为例，展示了使用该工具的步骤和效果。 ... [详细]

蜡笔小新 2023-12-13 21:23:45
json
大量研发销售产品设计市场岗位！

关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商，服务新产业周期的IoT&5G、边缘计算与云计算市场，交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]

蜡笔小新 2023-12-13 21:02:32
json
使用jQuery / AJAX实现两个div的动态更新

本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]

蜡笔小新 2023-12-11 10:07:32
js
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
scroll
DataTables插件介绍及使用方法

本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]

蜡笔小新 2023-12-09 17:40:33
js
jquery ajax 跨域问题

前言：关于跨域CORS1.没有跨域时，ajax默认是带cookie的2.跨域时，两种解决方案：1）服务器端在filter中配置详情：http:blog.csdn.netwzl002 ... [详细]

蜡笔小新 2023-10-17 17:47:27
上传
XMLhttpREquest_Ajax技术总结之XmlHttpRequest

Ajax1、什么是ajax　　 ... [详细]

蜡笔小新 2023-10-17 15:39:31

520TING小妖

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章