热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本篇文章给大家介绍一下bootstrapValidator验证最大值最小值范围限制的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
本篇文章给大家介绍一下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)){
									//从新验证该字段
									//$('#form').data('bootstrapValidator').revalidateField('nMax');
									 
									//当符合规则手动修改该字段的验证状态
									/* 因为上面方法两个字段相互验证 ,会造成死循环,所以在两个字段比较之后,并且符合验证规则,就手动修改该字段的验证状态 */
									$('#form').data('bootstrapValidator').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) ){
								
								if( Number(nMax.val()) = Number(value) && Number(nMax.val()) >= Number(nSetVal.val()) ){
									 
									$('#form').data('bootstrapValidator').updateStatus("nSetVal", "VALID", null );
									$('#form').data('bootstrapValidator').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) ){
								 
								 
								if( nMin.val()!='' && Number(nMin.val()) > Number(value)){
									 
									$('#form').data('bootstrapValidator').updateStatus("nMax", "VALID", null );	
									return { message:'设定值不可小于最小值', 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如何验证最大值和最小值限制的详细内容,更多请关注其它相关文章!


推荐阅读
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文介绍了 PHP 的基本概念、服务器与客户端的工作原理,以及 PHP 如何与数据库交互。同时,还涵盖了常见的数据库操作和安全性问题。 ... [详细]
  • ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • 调试利器SSH隧道
    在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到 ... [详细]
  • Web动态服务器Python基本实现
    Web动态服务器Python基本实现 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 精选10款Python框架助力并行与分布式机器学习
    随着神经网络模型的不断深化和复杂化,训练这些模型变得愈发具有挑战性,不仅需要处理大量的权重,还必须克服内存限制等问题。本文将介绍10款优秀的Python框架,帮助开发者高效地实现分布式和并行化的深度学习模型训练。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 在现代前端开发中,组件化已成为不可或缺的技术,尤其在 React 和 Vue 生态中。然而,组件的管理和测试一直是开发者面临的挑战。本文将介绍如何使用 Storybook 来简化这一过程,提高开发效率。 ... [详细]
  • 本文介绍了如何在不同操作系统上安装Git,以及一些基本和高级的Git操作,包括项目初始化、文件状态检查、版本控制、分支管理、标签处理、版本回退等,并简要提及了开源许可协议的选择。 ... [详细]
  • 【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库
    【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
author-avatar
520TING小妖
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有