Element-UI表单验证不生效问题

最新推荐文章于 2024-04-07 19:21:42 发布

Hanry.

最新推荐文章于 2024-04-07 19:21:42 发布

阅读量475

点赞数 7

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/lindaxia1026/article/details/129535889

版权

文章探讨了在Vue中正确设置el-form-item的prop属性以绑定v-model的问题，以及为何推荐使用v-show而非v-if进行双表单切换。同时提到了ref引用对象可能出现的错误及其原因。

摘要由CSDN通过智能技术生成

可能的原因

el-form-item未设置prop属性

需要给`<el-form-item>`标签设置prop属性

<!-- 这里的prop属性一定要加上，最好和v-model的属性名一样 -->
<el-form-item label="用户邮箱" prop="userMail">
    <el-input v-model="user.userMail"></el-input>
</el-form-item>

双表单切换使用了v-if，而不是使用v-show

原因是啥我也不清楚，总之网上有说法就是v-if行不通，需要用v-show来进行表单的切换。

ref的引用对象出错

<el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hanry.

关注关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

element-ui 表单的验证不生效可能有以下几种原因：v

qq_70036866的博客

06-20

1965

表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。

element-ui表单校验不生效问题总结

TTST_HTSN的博客

09-02

3045

在使用element这个UI框架的时候，表单校验有时候不生效，头大！！！可能存在问题 1.prop命名和form中对应的v-model名字不一样当v-model使用的名字和prop使用的名字不一样时就会出现无法验证的问题。 2.添加了rules但是没有prop 这个是最致命的，也是最不容易注意的在这种情况下，当你失去焦点以后不会触发验证规则。当你加上prop以后这个问题就迎刃而解。 表单验证时机不对当你回填的时候，明明没有触发验证，但是验证却实际的触发了，原因是： 1.返回值没有该input框

参与评论您还未登录，请先登录后发表或查看评论

ElementUI表单验证规则不生效

SingDanceRapBall的博客

01-17

735

去掉el-form-item的required属性

elementUI elfrom表单验证无效、不起作用常见原因

carbonzhao的专栏

09-16

5901

的问题，我就将

ElementUI表单校验不生效

热门推荐

weixin_52688746的博客

11-19

1万+

问题：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图：解决办法：出现问题的原因是 v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据；而：model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用了 v-model 所以出现了错误，正确使用如下： <el-form :model="logi

elementui 表单校验validate不起效果

qq_44792224的博客

12-28

1435

自定义的validator验证方式需要调用callback。验证失败callabck(new Errno(‘’)). 验证成功 callback()

vue.js element-ui validate中代码不执行问题解决方法

10-18

遵循这些最佳实践，可以确保在使用Element UI的表单验证时避免不必要的问题，提高代码质量。如果在实际开发中遇到其他问题，可以查阅官方文档或寻求社区帮助，持续学习和提升自己的技能。感谢您的阅读，希望这个解答...

Element-ui表单验证

m0_58550256的博客

07-04

1479

Element-UI表单验证

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

10-14

`prop`属性是Element-UI表单验证的基础，用于关联表单元素和验证规则。当使用Vuex管理状态时，可能会出现新建和编辑表单复用的情况。如果在提交表单后未能正确清理表单数据，`resetFields()`可能无法达到预期效果...

element-ui 表单验证（解决了表单验证不生效的问题）vue有关elementui form表单rules验证问题，有值却仍然显示不通过

m0_53251830的博客

01-18

4846

一般有值，但是表单认证不通过，是因为设定的rules参数和model绑定的参数不一致，或者是地址部一直，这些需要注意的点查一下都有，就不赘述了。下面说说另外一中用法，:prop='formData.'+index+'.value' 遍历表单的情况下表单检验对于数组数据如： modelData:{ id:'123', name:'用户数据', formData:[ //关键数据 { title:"姓名", ..

elementUI表单验证没有反应

PUBGA的博客

10-08

3296

项目当中出现点击按钮进行表单校验没有反应(既没有校验失败也没有校验成功) 出现此类问题首先检查是否使用了element的自定义校验如果使用了自定义校验无论验证成功或失败,都必须要返回一个callback() // 自定义校验社保 var validateSocialBase = (rule, value, callback) => { if (value < this.formData.socialMin) { callback(new Error(`社保

element ui表单验证失效原因分析

qq_50276105的博客

11-04

3628

title: [{ required: true, message: "请输入标题", trigger: 'blur' }],rules 中每个校验对象都有一项 trigger 是检验触发的方式,对。2、prop中的内容是v-model绑定的表单对应的值。、日期选择器 el-date-picker。

修改elementui组件的样式不生效问题，

最新发布

m0_47177307的博客

04-07

937

important，加上之后还是不生效，检查代码发现，<style lang="scss" scoped> 设置了scoped属性。样式只会影响当前组件内部的元素，而不会影响引入的第三方组件，当在一个 Vue 单文件组件中使用。样式时，样式规则只会应用于当前组件内部的元素，而不会泄漏到引入的第三方组件中。在修改表单组件时，想让表单的l<el-form-item>组件的able字体不加粗，或者把scoped属性去掉，就算不使用样式穿透也可以改变elementui组件样式。在 Vue 单文件组件中，

关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决

cabinx的博客

10-09

5791

关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决 1.问题描述： vue项目中使用ElementUI的表单form校验单的时候，按照校验规则进行输入，但是一直校验不通过，问题如下图： 2.解决方案：出现上述问题的根本原因竟然是：v-model与:model的区别问题（v-model：通常用于input的双向数据绑定，但它并不会向子组件传递数据。:model：表示绑定自定义属性，它只是将父组件的数据传递给子组件，但没有实现父组件和子组件数据之间的双向

element 表单使用校验校验失效问题

paidaboluo的博客

08-17

9773

element 表单使用校验校验失效问题

Element-ui表单验证验证失败,input内有内容仍然验证为空的问题,验证数值类型不一致问题

progrmmmm的博客

11-15

1万+

验证的key只能是数组内的某一个key,不能之间验证格式: html: <el-form :model="nodeName(数组名)" ref="nodeName(数组名)"> <el-form-item prop="name(数组内的属性)" label="内容:" :label-width="formLabelWidth" :rules="[{ required: true, message: '不能为空'}]"> <el-input

解决Element中表单校验规则不生效问题（vue项目）

编程小白的博客

11-29

1387

解决Element中表单校验规则不生效问题（vue项目）

element表单校验不生效问题

weishachucuo的博客

07-22

1万+

element表单校验不生效问题根据我所遇到的问题情况，主要分两种，请遇到相同情况的同学，自己对号入座一波！！ 1.第一种是直接没反应，直接就不触发错误提示类。这种一般就是数据绑定的名称没有对应，以下是需要对应的位置，请自行参照。 html js 中data 第二种就是名称都对应上了，也修改了绑定的值，但是错误提示就是不消失问题。就类似如如下这种情况：如图所示我的图片已经显示成功了，但是错误提示还是没有消失，但是在保存校验的时候是没有问题的，所以初步判断为，表单校验方法没有触发。所以我定义了

【element-ui】form表单验证不生效的原因及解决方案

m0_61447532的博客

12-17

4484

首先废话不多说，直接说原因和解决方法验证不生效这个问题我是在做双表单切换验证的时候遇到的，主要的原因是因为vue加载机制如果使用v-if进行判断显示哪一个的话，就挂载不上element-ui的动态验证，如果改用v-show的话就解决了 ...

通过v-if渲染的element-ui表单,校验规则不生效

05-24

如果你使用 `v-if` 来渲染 Element UI 表单，可能会出现校验规则不生效的问题。这是因为当使用 `v-if` 来控制组件的显示和隐藏时，组件会被销毁并重新创建，此时校验规则也会被销毁，导致校验不生效。为了解决这个问题，可以使用 `v-show` 来代替 `v-if`，或者在使用 `v-if` 的同时，给表单组件添加 `key` 属性，使其在重新创建时保留校验规则。具体做法如下： 1. 使用 `v-show` 代替 `v-if`： ```html <template> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" > <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('submit success'); } else { console.log('submit error'); return false; } }); } } } </script> ``` 2. 使用 `v-if` 并添加 `key` 属性： ```html <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="用户名" prop="username" :key="key"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :key="key"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, key: 0 } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('submit success'); } else { console.log('submit error'); return false; } }); } }, watch: { // 监听 form 的变化，每次变化都给 key 加 1，使其重新渲染，并保留校验规则 form: { handler(val) { this.key += 1 }, deep: true } } } </script> ``` 以上两种方法均可解决校验规则不生效的问题，具体使用哪一种取决于你的实际需求。