小編給大家分享一下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');
//當符合規則手動修改該字段的驗證狀態
/* 因為上面方法兩個字段相互驗證 ，會造成死循環，所以在兩個字段比較之后，并且符合驗證規則，就手動修改該字段的驗證狀態 */
$('#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())<Number(value)){
//從新驗證該字段
//$('#form').data('bootstrapValidator').revalidateField('nMin');
//當符合規則手動修改該字段的驗證狀態
/* 因為上面方法兩個字段相互驗證 ，會造成死循環，所以在兩個字段比較之后，并且符合驗證規則，就手動修改該字段的驗證狀態 */
$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
return true;
}else if(nMin.val()==''){
return true;
}else{
return true;
}
}else{
return true;
}
}
}
}
}
}
});三個值進行比較
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) ){
$('#form').data('bootstrapValidator').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 );
$('#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) ){
$('#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)){
$('#form').data('bootstrapValidator').updateStatus("nMax", "VALID", null );
return { message:'設定值不可小于最小值', flag:false };
//設定值 大于最小值 小于最大值 符合全部要求
}else if( nMin.val()!='' && Number(nMin.val()) <= Number(value) && Number(nMax.val()) >= Number(value) ){
$('#form').data('bootstrapValidator').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: '必須輸入或者必須選擇'
}
//正整數驗證
digits : {
message : '字段必須是正整數'
}
//內容最小值驗證
greaterThan: {
value : 1，
message : '最小輸入1'
}
//內容最大值驗證
lessThan: {
value : 100
message : '最大輸入100'
}
//正則驗證
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '正則驗證，這里驗證只能輸入大小寫字母數字和下劃線'
}
//內容長度驗證
stringLength : {
min : 2,
max : 25,
message : '長度2-25位字符'
}
//回調驗證
callback: {
message: '請輸入整數',
callback: function(value, validator) {
//可以return true / false
//return false；
//也可以這樣
return { message:'最小值不可大于最大值', flag:false };
}
}
//日期驗證
date: {
format: 'YYYY/MM/DD',
message: '日期無效'
}
//數字驗證
digits: {
message: '該值只能包含數字。'
}
//ajax驗證
threshold : 6 , //有6字符以上才發送ajax請求，（input中輸入一個字符，插件會向服務器發送一次，設置限制，6字符以上才開始）
remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送當前input name值，獲得一個json數據。例表示正確：{"valid",true}
url: 'exist2.do',//驗證地址
message: '用戶已存在',//提示消息
delay : 2000,//每輸入一個字符，就發ajax請求，服務器壓力還是太大，設置2秒發送一次ajax（默認輸入一個字符，提交一次，服務器壓力太大）
type: 'POST'//請求方式
}
//復選框驗證
choice: {
min: 2,
max: 4,
message: '請選擇2-4項'
}
//密碼確認
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，它還有一個響應最好的Grid系統，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現需要的幾乎任何類型的網站的功能，此外，所有這些組件都是響應式的。
以上是“bootstrapValidator怎么驗證最大值和最小值限制”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
