BootStrap Validator 根据条件在JS中添加或移除校验操作

这是开始的校验代码

function initValidate() {
<span style="white-space:pre"> </span>$('#detailform').bootstrapValidator({
<span style="white-space:pre">     </span>feedbackIcons : {
<span style="white-space:pre">      </span>valid : 'glyphicon glyphicon-ok',
<span style="white-space:pre">      </span>invalid : 'glyphicon glyphicon-remove',
<span style="white-space:pre">      </span>validating : 'glyphicon glyphicon-refresh'
<span style="white-space:pre">     </span>},
<span style="white-space:pre">     </span>fields : {
<span style="white-space:pre">      </span>txPassword : {
<span style="white-space:pre">       </span>validators : {
<span style="white-space:pre">        </span>notEmpty : {
<span style="white-space:pre">         </span>message : '交易密码不能为空'
<span style="white-space:pre">        </span>},
<span style="white-space:pre">        </span>notSameAndContinuity : {
<span style="white-space:pre">         </span>message : '密码必须为6位不相同、不连续的数字'
<span style="white-space:pre">        </span>}
<span style="white-space:pre">       </span>}
<span style="white-space:pre">      </span>}
<span style="white-space:pre">     </span>}
<span style="white-space:pre">    </span>});
      }; 

有时我们需要根据条件,添加或移除

添加用addFile,approvalMemo 是input的name值

$("#detailform").bootstrapValidator("addField", "approvalMemo", {
<span style="white-space:pre">   </span>validators: {
<span style="white-space:pre">    </span>notEmpty : {
<span style="white-space:pre">     </span>message : '审批意见不能为空'
<span style="white-space:pre">    </span>}
<span style="white-space:pre">   </span>}
<span style="white-space:pre">  </span>}); 

$("#detailform").bootstrapValidator('removeField','approvalMemo'); 

移除用removeFile。

总结

以上所述是小编给大家介绍的BootStrap Validator 根据条件在JS中添加或移除校验,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • bootstrapValidator自定验证方法写法

    本文实例为大家分享了bootstrapValidator自定验证方法写法,供大家参考,具体内容如下 //表单验证 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.field.bv', function(e, data) { var $icon = data.element.data('bv.icon'), options = data.bv.getOptions(), // Entire opti

  • jquery插件bootstrapValidator数据验证详解

    因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载实例) 以上这些都是必须的. 先上个简单的例子,只要导入相应的文件可以直接运行: <!DOCTYP

  • jquery插件bootstrapValidator表单验证详解

    Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali

  • BootstrapValidator超详细教程(推荐)

    一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapVa

  • bootstrapValidator bootstrap-select验证不可用的解决办法

    如何解决bootStrapValidator bootStrap-select验证不可用,只要三步: 思路:把多选下拉框的选中值,赋给一个隐藏的input组件,再对input组件进行验证(bootstrap-validator默认情况下hidden,disabled的组件不验证,可以通过excluded属性更改),具体步骤如下: 1.表单验证初始化(js) $('#myModalForm').bootstrapValidator({ message: 'This value is not val

  • 基于BootstrapValidator的Form表单验证(24)

    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd

  • BootStrap Validator 根据条件在JS中添加或移除校验操作

    这是开始的校验代码 function initValidate() { <span style="white-space:pre"> </span>$('#detailform').bootstrapValidator({ <span style="white-space:pre"> </span>feedbackIcons : { <span style="white-space:pre"&

  • js中数组插入、删除元素操作的方法

    实例如下: /* * 删除数组元素:Array.removeArr(index) */ Array.prototype.removeArr = function (index) { if (isNaN(index) || index>= this.length) { return false; } this.splice(index, 1); } /* * 插入数组元素:Array.insertArr(dx) */ Array.prototype.insertArr = function (in

  • 在idea 中添加和删除模块Module操作

    1.添加模块 2.删除模块 补充知识:IDEA添加子Module的正确姿势 因需求要增加一个新的测试模块,于是要在一堆Module中再添加一个Module,单纯的我没有丝毫杂念的开始进行添加了. 1. 要在哪个目录下添加Module, 就对着该目录右击 -> new -> Module (该目录下必须有pom.xml文件, 否则是没有Module这个选项的) 2. 按提示操作输入必须填写的信息, 最后一个界面如下图: (注意:case_ignite_cache就是被右击的目录, 要在这个目录下

  • Redis集群水平扩展、集群中添加以及删除节点的操作

    在Redis集群搭建中,我们搭建了下图所示的Redis集群,接下来我们就来看看如何为我们的Redis集群进行水平扩容. [root@localhost redis-5.0.3]# src/redis-server redis-cluster/8001/redis.conf [root@localhost redis-5.0.3]# src/redis-server redis-cluster/8004/redis.conf [root@localhost redis-5.0.3]# src/re

  • 在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • vue中添加mp3音频文件的方法

    有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"> </audio> 以上这种方式就能够解决这个问题了. 方法二.给项目配置mp3格式的解析器 1.在webpack.base

  • 详解如何在nuxt中添加proxyTable代理

    背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码. build/dev-server.js // proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTa

  • 一篇文中告诉你JS中的"值传递"和"引用传递"

    目录 前言 初步了解堆栈 堆栈和类型的关系 特点 变量赋值 参数传递 小结 面试题 两者的区别就是: 总结 前言 现代的前端开发,不再是刀耕火种的 JQ 时代,而是 MVVM ,组件化,工程化,承载着日益复杂的业务逻辑.内存消耗和性能问题,成为当代开发者必须要考虑的问题. 本文从堆栈内存讲起,让大家理解JS中变量的内存使用以及变动情况 . 初步了解堆栈 先初步了解JS中的堆和栈,内存空间分为 堆和栈 两个区域,代码运行时,解析器会先判断变量类型,根据变量类型,将变量放到不同的内存空间中(堆和栈)

  • Node.js中Express框架的使用教程详解

    目录 Express简介 Express生成器 1. 什么是Express生成器 2. 安装Express生成器 创建Express项目 安装项目依赖 运行Express项目 Express目录结构说明 创建一个新路由模块 1. 创建ejs模块文件 2. 创建路由文件 3. 在app.js中引入路由 4. 运行项目 经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express.利用Express框架可以快速的进行W

  • bootstrap中添加额外的图标实例代码

    说明 可以针对校验状态为输入框添加额外的图标.只需设置相应的 .has-feedback 类并添加正确的图标即可 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m

随机推荐