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 ...
随机推荐
- ArcMap 导入 CGCS2000 线段数据
1. 先确定数据的经纬度和X.Y列是否正确, 2. ArcToolBox ---> DataManagement Tools ---> XY to line 3. 选择数据,选择对应起始点 ...
- java学习笔记之IO编程—对象序列化
对象序列化就是将内存中保存的对象以二进制数据流的形式进行处理,可以实现对象的保存或网络传输. 并不是所有的对象都可以被序列化,如果要序列化的对象,那么对象所在的类一定要实现java.io.Serial ...
- 零基础入门 Kubernetes,你需要知道这些
Kubernetes是什么? 大概很多人对此都有疑问,不过在容器领域,Kubernetes却无人不晓. 阿里.字节跳动.腾讯.百度等中国互联网行业巨擘们,近年来都在深耕容器领域,而Kubernetes ...
- react-发表评论案例
评论列表组件 import React from 'react' import CMTItem from './CmtItem.jsx' import CMTBox from './CmtBox.js ...
- KVM命令--使用篇(1)
1. KVM常见使用命令: 1.1 查看命令 列出所有虚拟机 virsh list --all 显示虚拟机信息 virsh dominfo vm_name 显示虚拟机内存和cpu使用情况 virsh- ...
- C 库函数 - modf()
C 库函数 - modf() C 标准库 - <math.h> 描述 C 库函数 double modf(double x, double *integer) 返回值为小数部分(小数点后的 ...
- Mac下怎么更新nodejs
Windows下更新nodejs最简单粗暴的应该就是去官网下载安装包安装了,昨天项目中需要更新nodejs我便找了一下相关文章,发现有一个 n 模块可以管理node,n 是Node的一个模块,所以安装 ...
- 【巨杉数据库Sequoiadb】点燃深秋,巨杉数据库亮相DTC数据技术嘉年华大会
2019年11月15日,第九届数据技术嘉年华大会在北京隆重召开,本次大会以 “开源 • 智能 • 云数据 - 自主驱动发展 创新引领未来” 为主题,探索数据价值,共论智能未来.SequoiaDB 巨 ...
- ansible-主机分组
一.安装ansible yum install ansible -y ansible --version //查看版本,没有报错即安装成功 二.ansible主机定义与分组 1. ansible配置文 ...
- host文件无写权限时,怎么设置
点击文件属性---安全---选择对应的用户---编辑属性---勾选需要的属性---应用---确定