vue rules不生效

最新推荐文章于 2025-03-25 16:53:47 发布
最新推荐文章于 2025-03-25 16:53:47 发布
阅读量5.3k 收藏 11
点赞数 5
文章标签： vue.js vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45472675/article/details/111470406
版权
本文探讨了Vue项目中使用Element UI的表单验证组件时遇到的问题及解决办法。主要分析了vuerules未生效的原因，并给出了三个关键点：确保rules属性正确配置、prop属性与表单字段匹配以及prop值与Vue实例中的数据属性一致。

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

vue rules不生效

问题查找

   <el-form ref="from" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h1>欢迎登录</h1>
      <el-form-item label="账号" prop="code">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></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="login">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
``
  1. 注意:rules=“rules” 这里不填验证在页面上是不会产生效果的

在这里插入图片描述
2. 注意prop="code"这里不填写也是绑定不上的
3. prop的值和定义的vue变量要相同（很重要！！！）

伺
关注
Vue3 - 在项目中使用vue-i18n不生效的问题
良月柒
06-22 1578
messages这个key显示的写出来，不然页面一直显示的key，不会显示对应的文本。如果你的多语言文件是 message.js，那么可以按照上图进行配置。确保你已经正确安装了Vue I18n并且配置了组合API模式。如果没有配置 legacy: false，使用会报错。
vue form设置rules不生效
daxi玫瑰的博客
08-19 7725
vue form设置rules不生效
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 7465
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
element rules不生效
Macao7_W的博客
08-23 4556
当页面中存在多个<el-form>时，所加的rules不会生效（尚未找出什么原因，大神请指教）。 正确做法：将<el-form-item>放在一个<el-form>里。 <el-form-item label="学生姓名" prop="stName"> <el-input v-model="form.stName" placeholder="请输入学生姓名" /> </el-form-ite
UView小程序表单校验无法生效的问题记录
最新发布
qq_52335693的博客
03-25 177
解决：需要添加语句 this.$refs.form1.setRules(this.rules);如上图给表单的密码输入框添加了规则校验，但结果无法在输入框中生效。
vue 添加rules不生效
weixin_43872691的博客
06-28 998
vue rules不生效
vue rules未生效
qq_34629527的博客
04-11 1074
vue rules不生效
VUE表单校验rules不起作用
卡农的魔笛
02-29 1万+
在做公安局疫情上报系统的时候，由于前台的表单项目比较多，而且需要根据不同的条件进行显示切换，开始运行是表单校验很好用，随着项目不断更新，忽然有一天发现校验不起作用了。 经过几次调试，发现一个规律，就只有2项是不好用的，而且就是2，3项目不起作用，把表单换一下位置，只要是处在第二，第三项目上，就不行。比如第二项之前是身份证，把身份证提到第一项上，姓名为第二项，那么姓名的校验就不好用。 经过1个多小时...
【vue】vue引用element plus的对话框中的rules不起作用
m0_63667667的博客
05-05 717
2.<el-form-item>标签内必须有prop属性。rules不起作用的原因：1 :rules要写在<el-from>标签里面，不能写在<el-dialog>中间。
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
vue debugger不生效
12-14
在Vue中，如果debugger不生效，可能是因为代码中没有添加debugger语句，或者浏览器的调试工具没有打开。如果你已经在代码中添加了debugger语句，但仍然无法生效，可以尝试以下方法： 1. 确保浏览器的调试工具已经...
Vue 自定义rule不生效问题
Remain_Slience的博客
11-26 2458
Vue 自定义rule不生效问题
vue roleForm的rules不起作用/部分起作用【限制表单中输入的长度】【普通表单变验证表单】
pursuingSun的博客
04-27 1379
今天用vue+elementUI做前端，要用到验证表单，我由于已经写了表单信息，所以在普通表单的基础上去做修改。但是发现验证表单的id输入两条验证要求【非空和输入长度】，只有第一条起作用，并且没有随着输入的改变而改变。经过一番查找发现以下几点需要修改的地方： 绑定： 包括两部分：整个表格的绑定以及属性的绑定： 整个表格使用【:model】绑定表格内容，使用【:rules】绑定规则，不可以使用v-model！！ 属性绑定使用【prop】 举例： <el-form :model="form" :.
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
lilang_9920的博客
03-22 3444
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验
热门推荐
mashangzhifu的博客
11-01 2万+
一、问题描述 这里由一个动态切换规则校验引发的一些问题，整理了下，如下文所示。 1.动态绑定规则校验 这里有个需求就是，动态切换radio，对input输入框校验，界面如下 在网上找了一圈，用了第一种方法来解决，动态添加验证规则，方法如下 <el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platfo
在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?
i-cat的博客
02-22 3140
vant组件自带表单校验不生效，原因竟是没加name属性！！！
VUE表单验证rules不起作用
专栏
12-03 1490
必须加上 el-form-item label= prop= 而且prop需要与表单里的属性相同
vuetify的radio等UI样式未生效解决办法
sharleen84的博客
02-24 819
当使用v-radio时，无样式出现，如下图： 仅需要：更改你的字体库，需要在实例化过程中添加 iconfont选项。 export default new Vuetify({ icons: { iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg' }, }) 即可解决问题，如下： ...
vue中动态绑定radio单选框选中状态失效
h5_since的博客
11-04 3812
最近一个项目，在动态绑定单选按钮的选中状态时失效，代码如下 效果 有的动态绑定正常，有的没有显示，仔细看浏览器的dom，发现没有正常显示的是因为多组单选按钮的name重复了，所以就只会对最后一组生效 多组单选按钮 , 如果设置的name相同 , 并且分别设置了默认选中 , 结果就只默认选中最后一组的设置了默认选中的按钮 解决方法： 在给name动态赋值的时候加上唯一标识符 完美解决 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值