接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现。

先看dom

<div class="form-group">
<label class="col-sm-3 control-label">起止年限:</label> <div class="col-sm-9 row">
<div class="col-xs-5">
<div class="input-group">
<input type="text" name="beginYear" class="form-control "/>
<span class="input-group-addon">年</span>
</div>
</div>
<div class="col-xs-1" style="line-height:36px;"> 至</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" name="endYear" class="form-control"/>
<span class="input-group-addon">年</span>
</div>
</div>
</div>
</div

  在这个表单中,我们往往需要开始年份不能晚于结束年份,及beginYear<=endYear,此时,验证我们可以这样写

fields: {
beginYear: {
validators: {
integer: {},
callback: {
message: '开始日期不能大于结束日期',
callback:function(value, validator,$field,options){
var begin = $('#pro_info').find("input[name='endYear']").val();
return parseInt(value)<=parseInt(begin);
}
}
}
},
endYear: {
validators: {
integer: {},
callback: {
message: '结束日期不能小于开始日期',
callback:function(value, validator,$field){
var begin = $('#pro_info').find("input[name='beginYear']").val();
$('#pro_info').find("input[name='beginYear']").keypress();
validator.updateStatus('beginYear', 'VALID');
return parseInt(value)>=parseInt(begin);
}
}
}
}
}
});

  

主要是利用callback函数,传入参数validator验证器,利用验证器更新指定字段的状态。这样就可以实现多字段联合验证,当然,三个字段、四个字段也是如此。

转载请注明出处,博客园:http://www.cnblogs.com/dreamowneryong/p/5000206.html;如有疑问,欢迎前往原创评论,共同探讨。

bootstrap联动校验(转载)的更多相关文章

  1. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  2. vue day3 bootstrap 联动下拉

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  3. bootstrap重置校验方法

    $(function (){ $("select").change(function(){ $('#DepartForm').bootstrapValidator('resetFo ...

  4. 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  5. SilverlightMVVM模式中的数据校验

    silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的 数据是必填的且可能需要进行数据格式校验的 其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...

  6. Traveller项目技术资料

    Spring Spring PecClinic:Spring官方的宠物医院项目 it.zhaozhao.info/archives/63818:SPRING JPA入门 Spring Data RES ...

  7. MVVM1

    silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的 数据是必填的且可能需要进行数据格式校验的 其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...

  8. AngularJS系列-翻译官网

    公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...

  9. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

随机推荐

  1. 亚马逊云推出基于机器学习的企业搜索服务Kendra,剑指微软

    近日,在AWS re:Invent全球大会上,亚马逊发布了五项新的基于机器学习的人工智能 (AI) 服务. 这五项服务包括机器学习驱动的企业搜索.代码审核与分析.欺诈检测.医疗转录和 AI 预测的人工 ...

  2. Docker+Nginx+Tomcat实现负载均衡

    环境检测: 1.Docker没有安装的小伙伴请查看https://www.cnblogs.com/niuniu0108/p/12372531.html 2.没有创建Nginx容器的小伙伴请查看http ...

  3. [HNOI2009]图的同构记数

    题意 在所以置换下,本质不同的\(n\)阶图个数 做法 可以假想成\(K_n\),边有黑白两色,黑边存在于原图,白边存在于补图 由于\(n\le 60\),可以手算出拆分数不大,所以我们爆搜置换群 对 ...

  4. 【LInux01】学习Linux课程体系

    知识 =>技能   需要大量的练习  相当于复盘 要有成就感 在一个领域深挖,再迁移到其他领域 1.两周以后的知识留存率: 主动学习: 动手实践:40% 讲给别人听:70% 写博客:是写教程,便 ...

  5. 记一个js toUpperCase函数 大小写特性

    toUpperCase()是javascript中小写变大写的函数 "ı".toUpperCase() == 'I',"ſ".toUpperCase() == ...

  6. vue自学入门-8(vue slot-scope)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  7. NumPy迭代数组

    numpy.nditer是NumPy的一个迭代器对象,提供能够灵活的访问一个或者多个属猪元素的方式. # 迭代 z=np.arange(6).reshape(3,2) for x in np.ndit ...

  8. linux--后端项目部署

    nginx + uwsgi + crm + mysql + virtualenv + supervisor项目部署 1.后端整起,用uwsgi启动crm 2.创建一个新的虚拟环境,用于运行crm新业务 ...

  9. docker镜像ubuntu封装jdk1.8.0【dockerfile】

    github地址:https://github.com/laileman/Docker/Dockerfile/ubuntu-jdk1.8.0_172 1-目录结构 2- dockerfile内容 3- ...

  10. MySQL的操作数据库SQL语法

    MySQL的操作数据库SQL语法 顺序:操作数据库 > 操作数据库中的表 > 操作数据库中的表的数据 MySQL不区分大小写字母 1. 操作数据库 1.创建数据库 2.删除数据库 3.使用 ...