BootstrapValidator验证规则

需引用组件

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

常用验证规则

notEmpty: {
message: '不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '只能包含大写、小写、数字和下划线'
},
emailAddress: {
message: '邮箱地址格式有误'
},
numeric:{
message:'只能输入数值'
},
phone:{
message:'手机号格式不正确'
},
between:{
   min:10,
   max:100,
message:'输入值必须在大于10小于100'
},
stringCase: {
message: '只能包含大写字符',
case: 'upper'//其他值或不填表示只能小写字符
},
different: {
field: 'password',
message: '和密码不能相同'
},
date: {
format: 'YYYY/MM/DD',
message: '日期无效'
},
digits: {
message: '该值只能包含数字。'
},
choice: {
min: 2,
max: 4,
message: '请选择2-4项'
},
identical: {
  field: 'confirmPassword',
  message: '确认密码和密码不同'
},
greaterThan: {
value: 18,
message: '必须大于18'
},
lessThan: {
value: 100,
message: '必须小于100'
},
remote: {//ajax验证。获得json数据:{"valid",true or false} ,向服务发送当前input name值
  url: 'exist2.do',//验证地址
  message: '用户已存在',//提示消息
  delay : 2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大)
  type: 'POST'//请求方式
  /**自定义提交数据,默认值提交当前input value
   data: function(validator) {
    return {
      password: $('[name="passwordNameAttributeInYourForm"]').val(),
      whatever: $('[name="whateverNameAttributeInYourForm"]').val()
  };
}*/
},
 

可能出现的坑:

bootstrapValidator默认逻辑是当表单验证失败时,把按钮给变灰色。
但是项目中,button并不在form内部,是通过事件绑定来ajax提交的。那么问题来了:

项目需要当form验证失败时,不执行所绑定的后续事件。百度半天找不到相关资料,最后还是要靠google:

$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){
var bootstrapValidator = $("#yourform").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
$("#yourform").submit();
else return;
});

BootStrap表格:列参数

BootstrapValidator验证规则、BootStrap表格:列参数的更多相关文章

  1. 爱上MVC3~为下拉列表框添加一个自定义验证规则

    回到目录 开发它的原因: 之前的同事,也是我的哥们,问我下拉列表框是否可以支持验证,这个问题看似简单,但确实MVC里有为我们提供,所以,只能自己写个扩展了,即自己写一个attribute特性,让它继承 ...

  2. MVC小系列(十七)【自定义验证规则给下拉框】

    因为下拉框不支持验证,所以写一个attribute特性,让它继承ValidationAttributemvc的特性验证,很直接,无论是数据安全特性上还是页面表现上都不错,它的运行机制: 前台表单验证规 ...

  3. Yii自定义验证规则

    简单的方法:在 model 内部定义规则 最简单的定义验证规则的方法是在使用它的模型(model)内部定义. 比方说,你要检查用户的密码是否足够安全. 通常情况下你会使用 CRegularExpres ...

  4. bootstrapValidator常用验证规则总结

    bootstrapValidator常用验证规则总结 一 .bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapVa ...

  5. Jquery Validate 相关参数及常用的自定义验证规则

    一.官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 二.默认校验规则 1 2 3 4 5 6 7 8 9 10 1 ...

  6. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  7. YII开发技巧分享——模型(models)中rules自定义验证规则

    YII的models中的rules部分是一些表单的验证规则,对于表单验证十分有用,在相应的视图(views)里面添加了表单,在表单被提交之前程序都会自动先来这里面的规则里验证,只有通过对其有效的限制规 ...

  8. YII 表单验证规则

    官方文档:http://www.yiichina.com/guide/form.model 类参考手册:http://www.yiichina.com/api/CValidatorhttp://www ...

  9. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

随机推荐

  1. AWS中国区使用https访问部署在S3上的网站

    问题描述 最近一个项目需要通过https的方式访问部署在S3上的网站,通过搜索引擎找到一篇文章,可以在AWS Global实现整个过程.但是目前AWS中国区有限制,CloudFront不能使用AWS ...

  2. JDBC UPDATE误区

    1 package com.lykion; 2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import ...

  3. Linux服务器上搭建测试环境(war包+tomcat)

    悟空CRM项目环境部署(Java war项目) 在/root目录下创建一个文件夹(名字自取). ls命令查看一下是否创建成功,看到了新建的文件夹说明创建成功. tomcat和war包的准备:可以使用X ...

  4. UDP 通讯方式

    1.创建套接字:2.绑定端口:3.收发数据: 收到的数据中包含发送方的端口信息4.关闭套接字:

  5. Redis底层数据结构实现

    REDIS  较宽泛的支持5种数据结构  分别为 字符串 列表 集合 散列 有序集合 关于这几种数据结构的使用 相信网上有很多资料,查看官网API 也很详细了  读者可以自己随意翻阅 很方便 . 接下 ...

  6. spark bulkload 报错异常:Caused by: java.io.IOException: Added a key not lexically larger than previous

    ------------恢复内容开始------------ Caused by: java.io.IOException: Added a key not lexically larger than ...

  7. Head First 设计模式 —— 08. 外观 (Facade) 模式

    思考题 想想看,你在 JavaAPI 中遇到过哪些外观,你还希望 Java 能够新增哪些外观? P262 println.log 日志接口.JDBC 接口 突然让想感觉想不出来,各种 API 都用得挺 ...

  8. 【LeetCode】365.水壶问题

    题目描述 解题思路 思路一:裴蜀定理-数学法 由题意,每次操作只会让桶里的水总量增加x或y,或者减少x或y,即会给水的总量带来x或y的变化量,转为数字描述即为:找到一对整数a,b使得下式成立: ax+ ...

  9. Linux调整lvm逻辑分区大小

    转载自:https://www.cnblogs.com/kevingrace/p/5825963.html  个人记录一下   Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系 ...

  10. pyi文件是干嘛的?(一文读懂Python的存根文件和类型检查)

    参考资料: https://blog.csdn.net/weixin_40908748/article/details/106252884 https://www.python.org/dev/pep ...