本篇文章给大家介绍一下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'); //当符合规则手动修改该字段的验证状态 /* 因为上面方法两个字段相互验证 ，会造成死循环，所以在两个字段比较之后，并且符合验证规则，就手动修改该字段的验证状态 */ $('#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'}
更多编程相关知识，请访问：编程视频！！
以上就是bootstrapvalidator如何验证最大值和最小值限制的详细内容。