搜尋
首頁web前端Bootstrap教程bootstrapValidator如何驗證最大值和最小值限制

bootstrapValidator如何驗證最大值和最小值限制

青灯夜游
青灯夜游
May 17, 2021 am 10:24 AM
bootstrap

本篇文章跟大家介紹bootstrapValidator驗證最大值最小值範圍限制的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

bootstrapValidator如何驗證最大值和最小值限制

【相關推薦：《bootstrap教程》】

錄入該值的最大值與最小值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)){
									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中文網其他相關文章！
陳述
本文轉載於：csdn。如有侵權，請聯絡admin@php.cn刪除
相關文章
Bootstrap的目的：建立一致且有吸引力的網站Bootstrap的目的：建立一致且有吸引力的網站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是幫助開發者快速構建響應式、移動優先的網站。其核心功能包括：1.響應式設計，通過網格系統實現不同設備的佈局調整；2.預定義組件，如導航欄和模態框，確保美觀和跨瀏覽器兼容性；3.支持自定義和擴展，使用Sass變量和mixins調整樣式。

Bootstrap與其他框架：比較概述Bootstrap與其他框架：比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma，因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發，但自定義樣式可能較複雜。

在React中集成引導樣式：方法和技術在React中集成引導樣式：方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法：1)使用CDN引入，適合小型項目或快速原型設計；2)使用npm包管理器安裝，適用於需要深度定制的場景。通過這些方法，你可以在React中快速構建美觀且響應式的用戶界面。

React的引導：優勢和最佳實踐React的引導：優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括：1)快速開發，2)一致性和可維護性，3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫，可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap：網絡框架的快速指南Bootstrap：網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架，幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式，如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計，缺點是樣式一致性和學習曲線。

打破bootstrap：是什麼以及為什麼重要打破bootstrap：是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap：使網頁設計更容易Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
節省R.E.P.O.解釋（並保存文件）
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影 - 如何找到鐵匠，解鎖武器和裝甲定制
4 週前ByDDD
顯示更多

熱工具

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7564
15
CakePHP 教程
1386
52
steam的賬戶名稱是什麼格式
87
11
win11激活密鑰永久
61
19
NYT連接提示和答案
28
101
顯示更多