bootstrap联动校验(转载)
接触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联动校验(转载)的更多相关文章
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- vue day3 bootstrap 联动下拉
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- bootstrap重置校验方法
$(function (){ $("select").change(function(){ $('#DepartForm').bootstrapValidator('resetFo ...
- 翻译:使用 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 ...
- SilverlightMVVM模式中的数据校验
silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的 数据是必填的且可能需要进行数据格式校验的 其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...
- Traveller项目技术资料
Spring Spring PecClinic:Spring官方的宠物医院项目 it.zhaozhao.info/archives/63818:SPRING JPA入门 Spring Data RES ...
- MVVM1
silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的 数据是必填的且可能需要进行数据格式校验的 其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...
- AngularJS系列-翻译官网
公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...
- jquery.validate和jquery.form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
随机推荐
- 图片选择并使用base64展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- luogu P1736 创意吃鱼法
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...
- python3练习100题——051
题目:学习使用按位与 & . 不会的知识点,查了一下按位运算. 按位运算符是把数字看作二进制来进行计算的. 运算符 描述 实例 & 按位与运算符:参与运算的两个值,如果两个相应位都为1 ...
- 小白月赛22 B : 树上子链
B:树上子链 考察点 : 树的直径 坑点 : long long, 是点权不是边权 一个点也算一条链 析题得侃: 关于树的直径 这道题考察的是树的直径,最好用树形DP来写,具体解释详见上述博客, 这道 ...
- C# GZip Compress DeCompress
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Silver Cow Party POJ - 3268
#include<iostream> #include<queue> #include<cstring> using namespace std; +,INF=0x ...
- Gin_Cookie
1. cookie HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分两次请求是否由同一个客户端发出 Cookie就是解决HTTP协议无状态的方案之一,中文是小甜饼的意思 C ...
- shell循环结构解析:for/while/case
1.for循环结构 for var in item1 item2 ... itemN do command1 command2 ... commandN done 例如,顺序输出当前列表中的数字: # ...
- clone()与clone(true)的用法
clone() 方法生成被选元素的副本,包含子节点.文本和属性. 使用 clone(true) 方法在clone()的基础上还包括克隆元素的事件处理器.
- 《JavaScript ES6 函数式编程入门经典》--推荐指数⭐⭐⭐
这本书比较基础认真看完再自己写点demo一个双休日就差不多, 总体来说看完还是有收获的,会激起一些你对函数编程的兴趣 主要目录如下: 第1章 函数式编程简介 11.1 什么是函数式编程?为何它重要 1 ...