vue-element Form表单验证的一个小细节，不然一直提示错误信息

最新推荐文章于 2023-03-23 11:16:39 发布
最新推荐文章于 2023-03-23 11:16:39 发布
阅读量953 收藏 1
点赞数
分类专栏： 踩坑 文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DryJiuOver/article/details/119879239
版权

今天又发现一个小细节，把握住啊兄弟姐妹们！

在使用 vue-element Form表单验证时，prop的值与rules规则里面验证项的名字保持一致，却还是一直报错

 这tm的到底是为什么？？！！

男人一定要细，我说的是心一定要细QaQ~

prop的值不但要与rules规则里面验证项的名字保持一致，还要跟input框中v-model绑定的数据名一致

 

 修改之后三个值保持一致，成功解决问题

 

 

得益麻烦点个小小的赞哦~

AWoodStick
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目的手机号表单验证
qq_45228330的博客
02-24 3933
Vue项目的手机号表单验证 一、根据Vue官方文档写表单验证功能 二、检验规则写法 export default { data(){ //验证手机号的正则表达式 let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/ //验证方法 let validatorPhone = function (phone, value, callb
Vue ~ element-ui 动态表单验证，支持添加和删除操作
最新发布
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
记录element验证踩坑：async-validator: [‘region is required‘]
盏茶作酒的博客
03-23 1372
{ required: true, message: "请选择单位角色", trigger: ['blur','change'] }placeholder="请选择单位角色"在写element下拉框表单验证的时候出现的报错。value:'建设单位',value:'施工单位',value:'监理单位',value:'设计单位',lable:'建设单位'lable:'施工单位'lable:'监理单位'lable:'设计单位'
el-form表单验证根据接口返回错误信息
xjf106的博客
08-06 1054
使用error属性绑定值，在接口函数回调里处理提示信息
vue-element Form表单验证（表单验证没错却一直提示错误）
weixin_30443747的博客
05-08 4123
在使用element-UI 的表单时，发生一个验证错误，例如已输入值但求验证纠错： 代码如下所示： <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm" class="demo-ruleForm" > ...
form表单label添加提示图标
qq_28586135的博客
12-12 1682
form表单label添加提示图标
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2260
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到一种情况，即虽然输入框中已经输入了值，但是仍然提示错误信息。这是什么原因导致的？如何解决这个问题呢？ 首先，我们需要了解 Element 的表单验证...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
Vue Form Generator是一款基于Vue.js的库，特别针对Vue 3、TypeScript以及Element Plus组件库设计的动态表单生成器。这个工具允许开发者通过JSON schema快速构建复杂的表单，极大地提高了开发效率，减少了手动编写...
el-form表单label添加icon提示和必填校验
口袋的天空的博客
04-23 5239
像下面这样，表单前面必填校验，再在label前面添加Icon 提示悬浮文字。 如何实现呢？ 如下： el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签
el-form表单验证报错[Element Warn][Form]model is required for validate to work!
智十七的博客
10-26 1120
报错截图如下图所示： 1.属性绑定错误：v-bind:model绑定，而不是v-model <el-form :rules="rules" ref="login" v-bind:model="loginForm" class="loginContainer"></el-form> 2.ref重复 检查是否在其它表单中使用了相同的ref命名 ...
vue+element ui 小问号提示
热门推荐
weixin_41294419的博客
08-07 1万+
效果： 代码： <el-form-item label="域类型"> <el-select v-model="temp.fieldType" class="filter-item"> <el-option v-for="item in fieldTypeList" :key="item.value" :label="item.label" :value="item.value" /> </el-sel
Element-UI
qq_45859670的博客
05-17 504
Vee Validata官网
vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)
全干工程师
09-29 6050
文章目录局部注册dom模板解析注意事项用 Prop 传递不同值类型用 Prop通过 v-bind 动态赋值用 Prop传递对象的所有属性用 Prop传递对象数组用 Prop传入一个数字单向数据流Prop 验证 局部注册 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： var ComponentA = { /* ... */ } 然后在 components 选项中定义...
Vue3: vue3 props接多个不同类型的参数，默认false
weixin_44016350的博客
12-12 6403
Vue3: vue3 props接多个不同类型的参数，默认false
elementui的表单重置按钮不生效
weixin_44478972的博客
08-16 805
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" ~~prop="name"~~ > <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-fo
java计算CRC16校验码
qingshui_qs的博客
10-27 1877
java计算校验和的一个公式，亲测可行有效 /** * 计算CRC16校验码 * * @param data 需要校验的字符串 * @return 校验码 */ public static String getCRC(String data) { data = data.replace(" ", ""); int len = data.length(); if (!(len % 2 == 0)) { return "0000"; } int num = le
重新写一个vue3的element-plus的表单验证
06-07
好的，以下是一个简单的使用 Vue 3 和 Element Plus 实现表单验证的示例： ```html <template> <el-form :model="form" :rules="rules" ref="form"> <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> </template> <script> import { ref } from 'vue' import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus' export default { components: { ElForm, ElFormItem, ElInput, ElButton }, setup() { const form = ref({ username: '', password: '' }) const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] }) const submitForm = () => { const formRef = refs.form formRef.validate(valid => { if (valid) { // 表单验证通过，提交表单 console.log('submit form:', form.value) } else { // 表单验证失败 console.log('form validation failed') return false } }) } return { form, rules, submitForm } } } </script> ``` 在上面的代码中，我们使用了Vue 3的`ref`函数来定义了一个响应式变量`form`和`rules`，分别用于存储表单数据和表单验证规则。在`submitForm`方法中，我们通过`refs.form`来获取表单实例，并调用其`validate`方法进行表单验证。如果表单验证通过，则提交表单数据。如果验证失败，则返回`false`，阻止表单提交。 需要注意的是，在Vue 3中，我们需要使用`refs`来获取组件的引用。在上面的代码中，我们使用了`refs.form`来获取表单实例。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值