BootStrap 动态添加验证项和取消验证项的实现方法

bootstrap 中的bootstrapValidator可以对前端的数据进行验证，但是有的时候我们需要动态的添加验证，这样需要我们动态的对bootstrapValidator的内容做修改。

　　传统的bootstrapValidator验证是

$('#MaintainEntryForm').bootstrapValidator({
message: '输入值无效！',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Specifications: {
validators: {
notEmpty: { message: '请输入规格！' }
}
},
ProductNameEN: {
validators: {
notEmpty: { message: '请输入英文名称！' }
}
},
ApplyUnit: {
validators: {
notEmpty: { message: '请输入申报单位！' },
stringLength: {
min: 1,
max: 3,
message: '申报单位最多输入3位！'
}
}
},
SuttleWeight: {
validators: {
notEmpty: { message: '请输入净重！' },
//regexp: { regexp: /^\d{0,8}\.{0,1}(\d{1,3})?$/, message: '净重只能输入大于等于0的整数或者3位小数！' },
callback: {
message: '净重只能输入大于0的整数或者3位小数！',
callback: function (value, validator, $field) {
var reg = /^\d{0,8}\.{0,1}(\d{1,3})?$/;
return parseFloat(value) > 0 && reg.test(value);
}
}
}
}
}
}).on("success.form.bv", function (e) {
if (EntryInfo.SaveType == 1) {
EntryInfo.SaveEntryInfo();
}
else if (EntryInfo.SaveType == 2) {
EntryInfo.SaveAndSubmitAudit();
}
});

　　这样的验证在页面有交互的需求的时候不能够满足条件，所以我们需要动态的对验证条件进行修改，这里的做法是先把所有可能用到的条件先全部添加进去，在指定条件下去除筛选条件。

　　去除方式

$('#MaintainEntryForm').data('bootstrapValidator').validateField('ApplyUnit');

　　这样 名称为ApplyUnit的验证凡是就不会起作用了

对于已经提示报错信息的要去除验证信息的可以使用以下方式

$('#MaintainEntryForm').data('bootstrapValidator')
.updateStatus('ApplyQty', 'NOT_VALIDATED', null)
.validateField('ApplyQty');

　　这样页面对应的ApplyQty 字段后面验证信息就会消失 不用重置整个bootstrapValidator 就可以了

以上所述是小编给大家介绍的BootStrap 动态添加验证项和取消验证项的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascr

  • Knockout结合Bootstrap创建动态UI实现产品列表管理

    本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加.删除.修改. 需要的引用  <script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script> <script type='text/javascript' src='http://www.see-source.com/js/jquery-1.6.2.min.js'&g

  • Bootstrap框架动态生成Web页面文章内目录的方法

    引言 在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供的Affix插件将目录区域固定在页面上.Bootstrap文档便使用了它 准备工作-引入bootstrap.min.js 将bootstrap.min.js放入body之前的script标签中,uikit.min.js暂时不引入. 引入相关插件之后,我们的思路是首先根据文章自动生成锚点以及菜单内容

  • BootStrap 动态添加验证项和取消验证项的实现方法

    bootstrap 中的bootstrapValidator可以对前端的数据进行验证,但是有的时候我们需要动态的添加验证,这样需要我们动态的对bootstrapValidator的内容做修改. 传统的bootstrapValidator验证是 $('#MaintainEntryForm').bootstrapValidator({ message: '输入值无效!', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyp

  • bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

  • asp.net后台动态添加JS文件和css文件的引用实现方法

    本文实例讲述了asp.net后台动态添加JS文件和css文件的引用实现方法.分享给大家供大家参考之用.具体方法如下: 首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用: HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "tex

  • Python实现动态添加类的属性或成员函数的解决方法

    某些时候我们需要让类动态的添加属性或方法,比如我们在做插件时就可以采用这种方法.用一个配置文件指定需要加载的模块,可以根据业务扩展任意加入需要的模块. 本文就此简述了Python实现动态添加类的属性或成员函数的解决方法,具体方法如下: 首先我们可以参考ulipad的实现:mixin. 这里做的比较简单,只是声明一个类,类初始化的时候读取配置文件,根据配置列表加载特定目录下的模块下的函数,函数和模块同名,将此函数动态加载为类的成员函数. 代码如下所示: class WinBAS(Bas): def

  • jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

  • JS实现动态添加外部js、css到head标签的方法

    本文实例讲述了JS实现动态添加外部js.css到head标签的方法.分享给大家供大家参考,具体如下: function appendJQCDN() { var head = document.head || document.getElementsByTagName('head')[0]; var script = document.createElement('script'); var style = document.createElement('style'); script.setAt

  • javascript动态添加、修改、删除对象的属性与方法详解

    现在介绍如何为一个对象添加.修改或者删除属性和方法.在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object(); 1．添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user

  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    使用bootstrapValidator插件进行动态添加表单元素并校验

    一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV

  • JQuery Ajax 异步操作之动态添加节点功能

    异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInf

  • vue3动态添加路由

    vue3动态添加路由

    目录 前言 一.初始化项目 二.添加“vip”路由 三.总结 前言 有的时候我们需要根据不同的用户身份生成不同的路由规则,例如: vip用户应该有自己的vip页面所对应的专用路由. 一.初始化项目 初始化vite + vue + ts项目,引入vue-router.目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用:catchAll(.*). 初始化路由: import {createRouter, createWebHashHistory} from "vu

随机推荐