简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > Bootstrap教程 > 正文

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

青灯夜游
发布： 2021-05-19 18:39:43
转载
2236 人浏览过

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

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

【相关推荐：《bootstrap教程》】

录入该值的最大值与最小值 bootstrapValidator进行效验，使最小值不可大于最大值，最大值不可小于最小值

刚开始的验证还是没事的，符合正常的验证规则

在这里插入图片描述
再把不符合规则的最大值改变，现在最小值已经比最大值小了，但是最大值没通过验证，说明在最小值框的内容改变时才会进行最小值的验证，最大值的框内容没改变，不会进行验证

在这里插入图片描述

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

//从新验证该字段
$('#form').data('bootstrapValidator').revalidateField('nMax');
登录后复制

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

$('#form').data('bootstrapValidator').updateStatus("nMax", "VALID", null );
登录后复制

两个值框进行对比

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

三个值进行比较

nMin:{
				validators:{
					notEmpty:{
						message:"最小值不能为空"
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: '请输入有效的值'
                    },
					callback: {
						callback: function(value, validator) {
							var nSetVal = $("#form").data("bootstrapValidator").getFieldElements('nSetVal');
							var nMax = $("#form").data("bootstrapValidator").getFieldElements('nMax');
							 
							//最小值大于设定值
							if( nSetVal.val()!='' && Number(nSetVal.val()) < Number(value) ){
								 
								return { message:'最小值不可大于设定值', flag:false };
								
							//最小值大于最大值
							}else if( nMax.val()!='' && Number(nMax.val()) < Number(value) ){
							
								$('#form').data('bootstrapValidator').updateStatus("nSetVal", "VALID", null );
								return { message:'最小值不可大于最大值', flag:false };
								 
							//最小值 小于 设定值
							}else if( nSetVal.val()!='' && Number(nSetVal.val()) >= Number(value) ){
								
								if( Number(nMax.val()) < Number(value) ){
									 
									$(&#39;#form&#39;).data(&#39;bootstrapValidator&#39;).updateStatus("nMax", "VALID", null );
									return { message:'最小值不可大于最大值', flag:false };
								 
								//最小值 小于设定值  小于最大值   符合全部要求
								}else if( nMax.val()!='' && Number(nMax.val()) >= Number(value) && Number(nMax.val()) >= Number(nSetVal.val()) ){
									 
									$('#form').data('bootstrapValidator').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:'设定值不能为空'
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: '请输入有效的值'
                    },
					callback: {
						callback: function(value, validator) {
							 
							var nMin = $("#form").data("bootstrapValidator").getFieldElements('nMin');
							var nMax = $("#form").data("bootstrapValidator").getFieldElements('nMax');
							 
							//设定值小于最小值
							if( nMin.val()!='' && Number(nMin.val()) > Number(value) ){
								 
								return { message:'设定值不可小于最小值', flag:false };
								
							//设定值 大于 最大值
							}else if( nMax.val()!='' && Number(nMax.val()) < Number(value) ){
								 
								$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
								return { message:'设定值不可大于最大值', flag:false };
								 
							//设定值 小于 最大值
							}else if( nMax.val()!='' && Number(nMax.val()) >= Number(value) ){
								 
								 
								if( nMin.val()!='' && Number(nMin.val()) > Number(value)){
									 
									$(&#39;#form&#39;).data(&#39;bootstrapValidator&#39;).updateStatus("nMax", "VALID", null );	
									return { message:'设定值不可小于最小值', flag:false };
									 
								//设定值 大于最小值 小于最大值   符合全部要求
								}else if( nMin.val()!='' && Number(nMin.val()) <= Number(value) && Number(nMax.val()) >= Number(value) ){
									 
									$(&#39;#form&#39;).data(&#39;bootstrapValidator&#39;).updateStatus("nMax", "VALID", null );
									$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
									return true;
									 
								}else{
									return true;
								}
								 
							}else{
								return true;
							}
						}
					}
				}
			},
			nMax:{
				validators:{
					notEmpty:{
						message:"最大值不能为空"
					},
					regexp: {
                        regexp: /^[0-9._]+$/,
                        message: '请输入有效的值'
                    },
					callback: {
						callback: function(value, validator) {
							var nMin = $("#form").data("bootstrapValidator").getFieldElements('nMin');
							var nSetVal = $("#form").data("bootstrapValidator").getFieldElements('nSetVal');
							 
							//最小值大于最大值
							if( nMin.val()!='' && Number(nMin.val()) > Number(value) ){
								 
								return { message:'最大值不可小于最小值', flag:false };
								
							//设定值 大于 最大值
							}else if( nSetVal.val()!='' && Number(nSetVal.val()) > Number(value) ){
								 
								$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
								return { message:'最大值不可小于设定值', flag:false };
								 
							//最小值 小于 最大值
							}else if( nMin.val()!='' && Number(nMin.val()) <= Number(value) ){
									 
								if(nSetVal.val()!='' && Number(nSetVal.val()) > Number(value)){
									$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
									return { message:'最大值不可小于设定值', flag:false };
									 
								//最小值 小于最大值 设定值 小于最大值   符合全部要求
								}else if( nSetVal.val()!='' && Number(nSetVal.val()) <= Number(value) && Number(nSetVal.val()) >= Number(nMin.val()) ){
									 
									$('#form').data('bootstrapValidator').updateStatus("nSetVal", "VALID", null );
									$('#form').data('bootstrapValidator').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如何验证最大值和最小值限制的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
bootstrap
来源：csdn.net
上一篇：浅谈Bootstrap3和Bootstrap4的差异 下一篇：浅谈bootstrapTable如何动态设置行和列的颜色
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
来自于 2024-04-06 20:22:15
0
1
454
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
Web页面调整大小时，Bootstrap开关无法正常工作 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
来自于 2024-04-05 08:45:39
0
1
3443
在Laravel中以Bootstrap模式展示AWS PDF文件 我已经下载了awsurl，例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...
来自于 2024-04-04 22:16:18
0
1
1450
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！