bootstrapValidator重复验证会出现无法验证，undefined

最新推荐文章于 2024-11-06 03:16:46 发布
原创 最新推荐文章于 2024-11-06 03:16:46 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrapValidator

在这里插入图片描述
解决办法：保证 $("#waterAnalyzeInput #waterAnalyzeform").bootstrapValidator({…})每次加载页面都可以被加载

html使用bootstrapValidator.js报错
qq_36257356的博客
09-15 1315
bootstrapValidator.js 3无效
vue 结合bootstrapValidator动态验证（包含动态数组）
yeyeyeyepujie的博客
03-12 2784
这里写自定义目录标题 vue mounted方法中 声明 form1为form元素id，fields中为需校验元素name属性及校验方法，在页面ajax请求前调用 var bootstrapValidator1 = $("#form1").data('bootstrapValidator'); bootstrapValidator1.validate(); ...
BootstrapValidator实现注册校验和登录错误提示效果（转）
WGH100817的博客
02-26 949
使用BootstrapValidator进行注册校验和登录错误提示，具体内容如下 1、介绍 在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验（后面还有时间区间、服务器校验）为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提...
bootstrapValidator验证失败问题
我的博客
05-20 853
bootstrapValidator默认逻辑是当表单验证失败时，把按钮给变灰色。 问题：项目中，button并不在form内部，是通过事件绑定来ajax提交，当form验证失败时，不执行所绑定的后续事件 $("#yourform").submit(function(ev){ev.preventDefault();}); $("#submit").on("click", function(){ var bootstrapValidator = $("#yourform").data('bootstrap.
Uncaught TypeError: $(...).bootstrapValidator is not a function
a549654065的博客
11-19 5038
第一次使用bootstrapValidator，结果啥文件都给导入了，居然报错！！！ <link rel="stylesheet" type="text/css" href="../css/homePage.css"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"&a
bootstrapValidator验证，二次校验时间控件无效问题
shy_lh的博客
03-07 1620
bootstrapValidator对已经校验的字段不会二次校验的，所有我们只要重新触发bootstrapValidator的校验就可以了。 上代码： $("#字段id").blur(function () { $('#form').data('bootstrapValidator') .updateStatus('字段i...
boostrapValidator自定义校验
刘刘刘刘刘牛皮的博客
03-18 559
boodstrapValidator自定义表单校验
Nest.js 实战 (四)：利用 Pipe 管道实现数据验证和转换
白雾茫茫丶
07-22 1358
这篇文章介绍了Nest.js框架中管道的概念和使用。管道是一种强大的功能，用于在请求数据到达控制器方法之前对其进行预处理，如转换、验证、清理等。文章详细解释了数据转换、数据验证、错误处理和一致性等管道的主要用途，并通过代码示例演示了如何使用内置管道和自定义管道。最后，文章总结了管道在提升应用健壮性和安全性方面的作用，认为合理利用管道可以加速开发周期，提高软件质量。
Vue：Prop(传递静态或动态、单项数据流、类型检查、验证)
ChinaDragon10的博客
07-15 1643
通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型
解决bootstrapValidator 与 datetimepicker 组合使用，二次校验日期验证不会刷新问题
_修铁路的、的博客
01-04 1568
场景： 最近接到反馈，页面表单未输入内容，直接点击保存，然后日期选择框选择日期，但页面校验还是没有刷新，一直显示错误提示信息，且页面表单无法提交，如下图。 页面表单采用bootstrapValidator 插件用做前端表单验证，日期选择器采用的是bootstrap 的datetimepicker 。两者结合使用，在表单日期第一次校验出错，再次修改提交后，校验状态和校验...
关于element框架中rules中validator中undefined问题
ALin_Think的博客
05-16 2796
问题 代码 分析 其实在element-ui框架中，这里rules中的checkPassword里面的validator的this指向windows而不是Vue，而form指向Vue，所以获取不到form，因此我们可以把validator后面代码整合到Vue的地方，然后在Vue的地方this指向就是指向Vue，也就可以获得this.form.renewpwd 解决 ...
Form表单验证神器： BootstrapValidator常见的坑，input框的value值改变二次验证不了？
lituxiu的博客
07-18 3791
BootstrapValidator表单验证是通常是用来设置form表单提交时，限制某些字段不能为空，为空时type="submit"的按钮一直提交不了，如下图 原理是引用BootstrapValidator插件后，根据要提交的form的name值对应的value数据判断，BootstrapValidator验证如下 $(document).ready(function () { $('form').bootstrapValidator({ exclude
JS -- 如何解决 bootstrap 校验一次之后不再校验 -- 14
支棱起来
11-15 529
<div class="form-group"> <label class="col-xs-3 control-label">%TARGETFILENAME%</label> <div class="col-xs-9"> <input type="text" class="form-control" name="targetname" data-type="targetname" maxLength="30"> </div>
bootstrap 报错 验证插件_bootstrap表单校验插件bootstrapvalidator 4.x使用遇到的问题
weixin_42150341的博客
01-14 645
对于bootstrap的表单校验，网上有很多插件，在使用了bootstrapvalidator 插件后，把遇到的问题记录下来。首先是对每一个字段写校验：$('#form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: '...
bootstrapValidator表单校验插件
qq_18369669的博客
03-10 234
使用bootstrapValidator插件校验表单。
bootstrapValidator验证小坑
三疯本疯
12-01 1064
bootstrapValidator验证小坑 验证如果表单是ajax提交的表单验证就会直接通过，达不到效果 $("#yourform").submit(function(ev){ev.preventDefault();}); $("#submit").on("click", function(){ var bootstrapValidator = $("#yourform").data('...
使用BootstrapValidator进行注册校验和登录错误提示
热门推荐
jrn1012的专栏
01-17 2万+
介绍在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提示信息。
告别表单验证痛点：jqBootstrapValidation 全场景问题解决方案
gitblog_00024的博客
11-06 697
你是否还在为 Bootstrap 表单验证头疼？提交时才发现错误、自定义提示不生效、动态表单验证失效……这些问题耗费开发者 40% 调试时间。本文基于 39/47/50 等真实 issue 场景，提供 7 大核心问题的代码级解决方案，包含 12 个可直接复用的代码示例与 5 种调试技巧，让你彻底掌握 jQuery 表单验证（Form Validation）框架的实战精髓。 读完本文你将获得： -...
BootstrapValidator表单验证效果无效，不验证
weixin_37674052的博客
05-14 4164
BootstrapValidator是一款非常好用的前端验证插件，但是因为很多问题，一直没有效果。 果然不是代码问题，而是因为Bootstrap版本和BootstrapValidator的版本问题。 首先贴出来我的引用的文件代码 <script src="${path}/js/jquery-3.4.1.min.js" type="text/javascript" ></scrip...
eleUI的form表单验证validator的value是undefined
最新发布
03-28
<think>好的，我现在要解决用户提出的Element UI表单验证中validator函数接收到的value值为undefined的问题。首先，我需要回忆一下自己之前遇到类似问题的经验，或者查阅相关文档和社区讨论。根据用户提供的引用内容，有几个可能的原因和解决方案需要逐一排查。 首先，用户提到在验证之前能拿到表单的值，但验证后却变成undefined。这可能是因为数据绑定或表单配置的问题。根据引用[2]和[4]，el-form-item必须正确设置prop属性，并且这个prop需要与rules中的规则对应。例如，如果prop是"age"，那么rules里也应该有对应的"age"规则。如果prop没有正确设置，或者与rules中的名称不匹配，可能导致验证时无法正确获取值。 其次，引用[3]指出，表单绑定的方式是否正确。正确的绑定应该是使用:model（v-bind:model）而不是v-model。因为el-form需要的是一个对象来保存表单数据，使用v-model可能会导致数据绑定错误，从而在验证时无法获取正确的值，出现undefined的情况。所以需要检查表单的绑定语法是否正确。 另外，表单数据的初始化也很重要。如果表单字段在初始时未定义，可能会导致验证时获取到undefined。例如，如果表单数据对象中的某个字段没有初始值，或者拼写错误，那么在验证时该字段可能不存在，导致value为undefined。因此，需要确保表单数据对象正确初始化，所有字段都有默认值。 还有一个可能的原因是自定义校验函数中的参数是否正确。根据引用[4]，自定义校验函数应该接收三个参数：rule, value, callback。如果函数定义时参数顺序或数量错误，可能导致value无法正确传递。例如，如果写成function(rule, callback, value)，那么value的位置就不对，自然获取不到正确的值。 接下来，我需要按照这些可能的原因，逐步指导用户进行检查和修复。例如，第一步检查prop属性是否正确，第二步确认表单绑定使用的是:model，第三步确保数据初始化正确，第四步检查自定义校验函数的参数顺序。同时，提供示例代码可以帮助用户更直观地理解正确的配置方式。 最后，需要提醒用户在修改后重新测试验证功能，并确认问题是否解决。如果仍有问题，可能需要进一步检查是否有其他配置错误或拼写错误。</think>### Element UI表单验证validator函数value为undefined的原因及解决方案 #### 问题分析原因 1. **`prop`属性未正确匹配** `el-form-item`的`prop`属性必须与`rules`中的规则名、表单数据字段名**完全一致**。例如，若数据字段为`form.age`，则`prop`需设置为`age`，且`rules`中对应的规则名为`age`[^2][^4]。 2. **表单绑定方式错误** 使用`v-model`绑定表单数据会导致数据流向异常，正确方式应为`:model`绑定表单对象[^3]。 3. **数据未初始化** 表单字段未在初始数据中定义，或字段名拼写错误，导致验证时无法获取值。 4. **自定义校验函数参数顺序错误** 自定义校验函数需按`(rule, value, callback)`顺序定义参数，若顺序错误将无法获取`value`。 --- #### 逐步解决方案 1. **检查`prop`属性匹配性** ```html <el-form :model="form" :rules="rules"> <el-form-item label="年龄" prop="age"> <!-- prop需与rules中的键名一致 --> <el-input v-model="form.age"></el-input> </el-form-item> </el-form> ``` ```javascript data() { return { form: { age: '' }, // 字段名必须与prop一致 rules: { age: [{ validator: validateAge, trigger: 'blur' }] // 规则名必须与prop一致 } } } ``` 2. **确认表单绑定为`:model`** ```html <!-- 正确绑定 --> <el-form :model="form"></el-form> <!-- 错误绑定（会导致数据异常） --> <el-form v-model="form"></el-form> ``` 3. **初始化表单数据** 确保所有需要验证的字段在`form`对象中已定义： ```javascript data() { return { form: { age: '', // 必须初始化 name: '' // 其他字段同理 } } } ``` 4. **验证自定义校验函数参数** 正确定义函数参数顺序： ```javascript // 正确参数顺序 const validateAge = (rule, value, callback) => { if (value === '') { callback(new Error('年龄不能为空')) } else { callback() } } // 错误示例（value将变为undefined） const validateAge = (rule, callback, value) => { ... } ``` --- #### 完整示例代码 ```html <template> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button @click="submit">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { // 初始化表单数据 return { form: { email: 'test@example.com' }, rules: { email: [ { validator: this.validateEmail, trigger: 'blur' } ] } } }, methods: { // 自定义校验函数 validateEmail(rule, value, callback) { console.log('当前值:', value) // 应输出test@example.com if (!value.includes('@')) { callback(new Error('邮箱格式错误')) } else { callback() } }, submit() { this.$refs.formRef.validate(valid => { if (valid) alert('验证成功') }) } } } </script> ``` --- ###
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值