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

2024-11-29 16:08:47

这是开始的校验代码

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中添加或移除校验，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

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

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

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

相关推荐

随机推荐