bootstrapvalidator实现校验、校验清除重置

最新推荐文章于 2022-12-07 15:57:11 发布
原创 最新推荐文章于 2022-12-07 15:57:11 发布 · 1.9w 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #css #validator #清除 #校验

在开发中遇到Bootstrap Modal弹窗校验问题，即第二次弹出时仍有上次的验证效果。解决方法包括：在关闭模态框时，通过`hidden.bs.modal`事件移除上次的验证配置，然后重新调用验证方法`formValidator()`，确保每次弹窗都有干净的验证状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：经常开发中用到modal对话框弹出验证以后第二次弹框时上次的验证效果依然有效，那就要想办法第二次弹框之前去掉上次的验证；

解决办法：

1.引入bootstrap的validator的校验js和css；

<linkrel="stylesheet"

href="<%=realPath%>/bootstrap/css/bootstrapValidator.css"/>

<scripttype="text/javascript"

src="<%=realPath%>/bootstrap/js/bootstrapValidator.js"></script>

2.body中定义的弹框modal

<body>

<!-- 弹框 -->

<divclass="modal fade"id="addDepModal"tabindex="-1"role="dialog"aria-labelledby="adddepLabel">

<divclass="modal-dialog"role="document">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss=

最低0.47元/天 解锁文章

200万优质内容无限畅学
浅谈bootstrap表单验证插件BootstrapValidator
jingzhunhuoke9的博客
12-07 253
本篇推荐一款twitter做的BootstrapValidator，本身Bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜BootstrapValidator会出现很多款，但我只推荐这款（突然感觉自己有点“库【Steve 库里】吹”的感觉）。 相关教程推荐：《bootstrap教程》 ###一、一睹为快 为了简便的介绍，这里只做为空的check。 BootstrapValidator官方下载地址 ###二、资源引用 下载完资源包后，你可以看到如下的目录。 .
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
12-28
1.引入css与js 　　bootstrapValidator.min.css 　　bootstrapValidator.min.js 2.html中的modal代码 <button type=
bootstrapValidator验证表单后清除当次验证的方法
duansamve的博客
10-11 6388
用bootstrapValidator的resetForm()方法： &lt;!-- // create server begin --&gt; &lt;div class="modal fade" id="server-create-server-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&.
bootstrapvalidator校验、校验清除重置
weixin_34259159的博客
08-02 450
1.引入css与js 　　bootstrapValidator.min.css 　　bootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ...
重置bootstrapValidator验证
china_hdy的博客
12-22 4104
问题: 使用bootstrapValidator验证时, 页面异步添加数据后清空form表单内容, 再次弹出添加数据Modal时字段无值, 但是之前的验证结果仍然存在, 造成二次添加时不能很好的对字段进行验证, 界面如下:解决办法: 在数据添加成功后清空form表单内容, 销毁bootstrapValidator验证,重新初始化验证规则    1. 重置表单数据       $("#add_for...
bootstrapValidator 重新手动触发验证
cy104204的专栏
11-20 8954
var bootstrapValidator = $("#addItemForm").data('bootstrapValidator');    bootstrapValidator.updateStatus('dayLimit', 'NOT_VALIDATED').validateField('dayLimit');   bootstrapValidator.updateStatus('m
bootstrapValidator字段重新赋值后更新验证状态
qq_30908729的博客
03-07 1493
bootstrapValidator字段重新赋值后更新验证状态 解决方法： 假如type字段不是手动输入的而是通过赋值的方式设置值，更新验证状态方式如下：http://www.yayihouse.com/yayishuwu/chapter/2486 ...
bootstrap关闭modal后，如何清空modal里的bootstrapValidator的校验痕迹
热门推荐
JamesCole的博客
09-08 1万+
在使用bootstrapValidator和modal结合使用时，出现的关闭modal后，再次打开modal，之前的验证会一直保留，并没有像官网example里那样灵活验证，不知道问题在只能强行清空。 强行移除自动添加的class，以及隐藏提示元素（此处不可以remove，因为bootstrapValidator源js中是在初始化验证时，创建此元素，之后只进行隐藏和显示操作，如果remove改元
去除bootstrapValidator 的校验结果
weixin_34239592的博客
07-20 195
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrapvalidator表单验证、验证清除重置
weixin_43501588的博客
03-05 877
// 初始化表单验证 $(function () { formValidator(); }); // Modal验证销毁重构 $('#add').on('hidden.bs.modal', function () { $("#formValidate").data('bootstrapValidator').destroy(); $('#formValidate').dat...
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
10-15
主要介绍了bootstrapValidator表单校验、更改状态、新增、移除校验字段,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
bootstrapvalidator使用，重置校验
weixin_30794491的博客
09-13 285
1.html页面需要注意的是验证字段需要用form-group包裹。需要引用相应的css和js。 <form id="jobForm" role="form" class="form-horizontal"> <input type="hidden" id="jobId" name="jobId" value=""> <div class="row"&...
bootstrapValidator插件动态添加和移除校验
zsg88的专栏
05-10 9760
bootstrapValidator对动态生成的表单进行校验，需要调用方法：addField。 方法：addField(field,option);   field可以是表单的name也可以是jQuery对象 举例 $("form").bootstrapValidator("addField",$("[name='roleName']")); 或 $("#form").bootstr
bootstrapValidator如何重新初始化
jbgtwang的专栏
03-28 1万+
在大多数情况下bootstrapValidator是不需要重新初始化的，极少数情况下则需要把动态增加的控件也纳入到验证中来。这时如何做？ //先销毁 $("#yourForm").data('bootstrapValidator').destroy(); $('#yourForm').data('bootstrapValidator', null); //再重新初始化 $("#y
bootstrapValidator常用验证规则总结
qq_41040871的博客
12-07 4223
bootstrapValidator常用验证规则总结
bootstrapvalidator 密码验证 以及清除验证
小鑫lay的博客
07-22 8110
   在项目中写了一个修改密码的功能，使用了bootstrapvalidator 来进行文本框的验证。 首先在修改密码的jsp页面上加载validator的css和js   路径存放可以自己选择合适的位置。  &lt;link rel="stylesheet" href="./static/validator/css/bootstrapValidator.css" /&gt; &lt;s...
bootstrapvalidator 模态框关闭时，验证重置
weixin_40886648的博客
10-25 2376
用户信息列表 点击某条记录 弹Modal窗口显示用户想起信息。  提交按钮 修改用户数据  问题：在提示验证消息后 关闭modal窗口 重新点击其他信息记录 modal中依然显示上个用户信息的验证消息。  解决： 使用validator的resetForm() 方法 $('#userForm').bootstrapValidator('resetForm'); 在关闭Modal窗口时加入res...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值