溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下bootstrapValidator怎么驗(yàn)證最大值和最小值限制，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
錄入該值的最大值與最小值 bootstrapValidator進(jìn)行效驗(yàn)，使最小值不可大于最大值，最大值不可小于最小值
剛開始的驗(yàn)證還是沒事的，符合正常的驗(yàn)證規(guī)則
再把不符合規(guī)則的最大值改變，現(xiàn)在最小值已經(jīng)比最大值小了，但是最大值沒通過驗(yàn)證，說明在最小值框的內(nèi)容改變時(shí)才會(huì)進(jìn)行最小值的驗(yàn)證，最大值的框內(nèi)容沒改變，不會(huì)進(jìn)行驗(yàn)證
一種辦法是，在callback中加上該方法，對(duì)這個(gè)字段從新進(jìn)行效驗(yàn)，但是兩個(gè)需要校驗(yàn)的都需要加，就造成了無限循環(huán)，
//從新驗(yàn)證該字段
$('#form').data('bootstrapValidator').revalidateField('nMax');可以自己獲取兩個(gè)字段的值，手動(dòng)進(jìn)行比較，當(dāng)符合驗(yàn)證規(guī)則，手動(dòng)修改該字段的驗(yàn)證狀態(tài)
$('#form').data('bootstrapValidator').updateStatus("nMax", "VALID", null );兩個(gè)值框進(jìn)行對(duì)比
$("#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: '請(qǐng)輸入有效的值'
},
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)){
//從新驗(yàn)證該字段
//$('#form').data('bootstrapValidator').revalidateField('nMax');
//當(dāng)符合規(guī)則手動(dòng)修改該字段的驗(yàn)證狀態(tài)
/* 因?yàn)樯厦娣椒▋蓚€(gè)字段相互驗(yàn)證 ，會(huì)造成死循環(huán)，所以在兩個(gè)字段比較之后，并且符合驗(yàn)證規(guī)則，就手動(dòng)修改該字段的驗(yàn)證狀態(tài) */
$('#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: '請(qǐng)輸入有效的值'
},
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)){
//從新驗(yàn)證該字段
//$('#form').data('bootstrapValidator').revalidateField('nMin');
//當(dāng)符合規(guī)則手動(dòng)修改該字段的驗(yàn)證狀態(tài)
/* 因?yàn)樯厦娣椒▋蓚€(gè)字段相互驗(yàn)證 ，會(huì)造成死循環(huán)，所以在兩個(gè)字段比較之后，并且符合驗(yàn)證規(guī)則，就手動(dòng)修改該字段的驗(yàn)證狀態(tài) */
$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
return true;
}else if(nMin.val()==''){
return true;
}else{
return true;
}
}else{
return true;
}
}
}
}
}
}
});三個(gè)值進(jìn)行比較
nMin:{
validators:{
notEmpty:{
message:"最小值不能為空"
},
regexp: {
regexp: /^[0-9._]+$/,
message: '請(qǐng)輸入有效的值'
},
callback: {
callback: function(value, validator) {
var nSetVal = $("#form").data("bootstrapValidator").getFieldElements('nSetVal');
var nMax = $("#form").data("bootstrapValidator").getFieldElements('nMax');
//最小值大于設(shè)定值
if( nSetVal.val()!='' && Number(nSetVal.val()) < Number(value) ){
return { message:'最小值不可大于設(shè)定值', flag:false };
//最小值大于最大值
}else if( nMax.val()!='' && Number(nMax.val()) < Number(value) ){
$('#form').data('bootstrapValidator').updateStatus("nSetVal", "VALID", null );
return { message:'最小值不可大于最大值', flag:false };
//最小值 小于 設(shè)定值
}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 };
//最小值 小于設(shè)定值 小于最大值 符合全部要求
}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;
//最小值 小于設(shè)定值 大于最大值
}else{
return true;
}
}else{
return true;
}
}
}
}
},
nSetVal:{
validators:{
notEmpty:{
message:'設(shè)定值不能為空'
},
regexp: {
regexp: /^[0-9._]+$/,
message: '請(qǐng)輸入有效的值'
},
callback: {
callback: function(value, validator) {
var nMin = $("#form").data("bootstrapValidator").getFieldElements('nMin');
var nMax = $("#form").data("bootstrapValidator").getFieldElements('nMax');
//設(shè)定值小于最小值
if( nMin.val()!='' && Number(nMin.val()) > Number(value) ){
return { message:'設(shè)定值不可小于最小值', flag:false };
//設(shè)定值 大于 最大值
}else if( nMax.val()!='' && Number(nMax.val()) < Number(value) ){
$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
return { message:'設(shè)定值不可大于最大值', flag:false };
//設(shè)定值 小于 最大值
}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:'設(shè)定值不可小于最小值', flag:false };
//設(shè)定值 大于最小值 小于最大值 符合全部要求
}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: '請(qǐng)輸入有效的值'
},
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 };
//設(shè)定值 大于 最大值
}else if( nSetVal.val()!='' && Number(nSetVal.val()) > Number(value) ){
$('#form').data('bootstrapValidator').updateStatus("nMin", "VALID", null );
return { message:'最大值不可小于設(shè)定值', 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:'最大值不可小于設(shè)定值', flag:false };
//最小值 小于最大值 設(shè)定值 小于最大值 符合全部要求
}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;
//最小值 小于最大值 設(shè)定值 大于最大值
}else{
return true;
}
}else{
return true;
}
}
}
}
}bootstrapValidator 常用的驗(yàn)證
//不為空驗(yàn)證
notEmpty: {
message: '必須輸入或者必須選擇'
}
//正整數(shù)驗(yàn)證
digits : {
message : '字段必須是正整數(shù)'
}
//內(nèi)容最小值驗(yàn)證
greaterThan: {
value : 1，
message : '最小輸入1'
}
//內(nèi)容最大值驗(yàn)證
lessThan: {
value : 100
message : '最大輸入100'
}
//正則驗(yàn)證
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '正則驗(yàn)證，這里驗(yàn)證只能輸入大小寫字母數(shù)字和下劃線'
}
//內(nèi)容長(zhǎng)度驗(yàn)證
stringLength : {
min : 2,
max : 25,
message : '長(zhǎng)度2-25位字符'
}
//回調(diào)驗(yàn)證
callback: {
message: '請(qǐng)輸入整數(shù)',
callback: function(value, validator) {
//可以return true / false
//return false；
//也可以這樣
return { message:'最小值不可大于最大值', flag:false };
}
}
//日期驗(yàn)證
date: {
format: 'YYYY/MM/DD',
message: '日期無效'
}
//數(shù)字驗(yàn)證
digits: {
message: '該值只能包含數(shù)字。'
}
//ajax驗(yàn)證
threshold : 6 , //有6字符以上才發(fā)送ajax請(qǐng)求，（input中輸入一個(gè)字符，插件會(huì)向服務(wù)器發(fā)送一次，設(shè)置限制，6字符以上才開始）
remote: {//ajax驗(yàn)證。server result:{"valid",true or false} 向服務(wù)發(fā)送當(dāng)前input name值，獲得一個(gè)json數(shù)據(jù)。例表示正確：{"valid",true}
url: 'exist2.do',//驗(yàn)證地址
message: '用戶已存在',//提示消息
delay : 2000,//每輸入一個(gè)字符，就發(fā)ajax請(qǐng)求，服務(wù)器壓力還是太大，設(shè)置2秒發(fā)送一次ajax（默認(rèn)輸入一個(gè)字符，提交一次，服務(wù)器壓力太大）
type: 'POST'//請(qǐng)求方式
}
//復(fù)選框驗(yàn)證
choice: {
min: 2,
max: 4,
message: '請(qǐng)選擇2-4項(xiàng)'
}
//密碼確認(rèn)
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。
以上是“bootstrapValidator怎么驗(yàn)證最大值和最小值限制”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼