vue element-ui form表单验证valid undefined

最新推荐文章于 2024-06-06 17:28:58 发布

原创最新推荐文章于 2024-06-06 17:28:58 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue valid 未定义

VUE 同时被 3 个专栏收录

20 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

13 篇文章

订阅专栏

本文探讨了在使用Element-UI的form组件进行表单验证时遇到的问题，具体表现为valid属性始终为未定义状态。文章深入分析并指出，这一问题通常源于自定义验证函数中缺少return或callback语句。

使用 element-ui 的form表达验证功能，调试时valid一直是未定义，是自定义表单验证，最后发现问题是没有return 或者callback

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Web攻城狮-前端

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element-ui | 第一次表单验证的结果，在第二次表单验证时仍然存在

代码青春

12-22

1733

在窗口打开时，对该表单项进行重置，将其值重置为初始值并移除校验结果 if(that.$refs.newAddFrom){ that.$refs.newAddFrom.resetFields(); } newAddFrom为定义的ref元素 if (this.$refs.editForm) this.$refs.editForm.resetFields(); 注意！！！！一定要加if (this.$refs.editForm)，因为第一次打开是undefine..

Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)

qq_46617584的博客

10-25

5696

Vue element 自定义表单验证(验证手机号或者区号、邮箱)

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

vue 表单提交 valid is undefined

lllo3o的博客

07-12

6240

this.$refs[formName].validate((valid) => {没进入这里})现象：提交表单时直接跳出函数了。原因：发现是data里的validate验证写的有问题，没有return或者callback()。解决：每一个没有return的地方都要注意...

el-form组件提示英文问题，改成中文

千里之行，始于足下！

10-09

4716

做项目的时，使用ElementUI组件库中的el-form组件时，设置了el-form-item 属性required，结果出现了英文提示,，类似 “xxx is required”：解决办法： 1、去掉 el-form-item 的 required 属性 2、只使用自定义校验规则 rules 中的 required:true 进行设置注意： el-form-item 的 required 属性和自定义校验规则 rules 中 required:true 都可以实现红色星号（*）的效果 ..

elementUI el-form 组件验证提示不能为空，以及验证不生效的详细原因

热门推荐

rudy_zhou的博客

06-08

2万+

elementUI el-form 组件验证提示不能为空，以及验证不生效的详细原因唠唠嗑如何进行验证的获取规则源码处写法获取验证项源码处写法上述使用中常见问题场景结语唠唠嗑用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。今天就专门分享一下，看el

vue+element-ui validator 有值任然提示不能为空的问题

m0_64677928的博客

09-19

468

以上代码运行时不论用户名输入什么都会提示“评估人不能为空”，这是应为不论你输入什么根本就没有取到值，原因是prop参数设置不一致导致。prop的参数应该设置为。.key的值，不能随意取名，此处prop应为：prop="assessmentUsers"；需要注意标红的位置，字段属性要一致。

element form表单validate验证打印值undefined

weixin_60208344的博客

12-21

4146

官方网站地址日常开发中经常会用到对form表单的规则进行校验，借助第三方组件也会让我们使用起来更加的方便，也是记录一下自己遇到的一点小问题话不多说上代码：

Element-UI源码——Form表单

qq_43391730的博客

04-03

1663

Form表单 form.vue <template> <form class="el-form" :class="[ labelPosition ? 'el-form--label-' + labelPosition : '', { 'el-form--inline': inline } ]"> <slot></slot> </form> </template> <script> im

Vue自定义组件使用Element-ui表单校验

qq_42731434的博客

07-17

2762

一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-

Elment-plus表单验证规则，不生效解决办法

蒙古国海军司令部

06-06

1146

Elment-plus表单验证规则不生效

undefined:验证值是否未定义

06-20

不明确的验证值是否未定义。安装 $ npm install validate.io-undefined 要在浏览器中使用，请使用。用法 var isUndefined = require ( 'validate.io-undefined' ) ; isUndefined(值) 验证value是否为undefined 。 var value ; var bool = isUndefined ( value ) ; // returns true 例子 var isUndefined = require ( 'validate.io-undefined' ) ; console . log ( isUndefined ( undefined ) ) ; // returns true console . log ( isUndefined ( null ) ) ; //

element 表单验证值为undefined的原因及解决方案

qing_xing_的博客

09-17

7979

闲话少说，步入正题。 表单验证的时候，值为undefined的原因，网上说的有三种 1、prop名称和rules中的名称一致 2、没有指定的model 3、绑定的属性没有在data中声明（这个可有可无）除了这三种外，还有一种情况，在验证之前我们都能拿到表单的值，但是验证之后打印的值为undefined。我这里具体问题出现的场景：子组件是抽屉，需要里面的值回显到父组件上，但是点击提交的时候值为undefined resetFields（）会将数据恢复初始值，这时候传过去的数据也会.

antd vue form 手动校验_动态生成的表单如何用 el-form 校验，你知道吗？

weixin_39875516的博客

11-25

1478

背景Vue 的 el-form 提供了表单校验功能，常规用法是用 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。但是有一种情况，如果表单位于 v-for 标签中，是动态生成的，该怎么使用 el-form-item 来校验呢？此外，如果待校验的表单是 el-popover 组件中的 readonly 表单，blur 触发不稳定，该怎么处理呢？本文继...

vue中表单验证数据总是undefined

庭落

11-28

3458

注意变量名称的对应

Vue Element UI动态生成的表单并校验

分享与记录前端点滴

07-10

2548

表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定。通常是用于 input 的双向绑定，但是它不会向子组件传递数据。

vue动态生成新表单并且添加验证校验规则

weixin_43242112的博客

07-18

6619

vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件，也就是触发渲染之前的事件三、ant-design中的校验规则一、a-form-model二、a-form-model-item 一、需求场景以及注意事项一、需求场景 1.用户输入数值，点击按钮弹出对话框的同时，按照用户输入的数值进行表单的渲染。 2.点击按钮之后，渲染效果如下：一、注意事项首先声明我这里使用的是ant-design，

解决require is undefined的问题

qq_44482048的博客

04-17

3697

错误详情：这是由于从node.js 14版及以上版本中，require作为COMMONJS的一个命令已不再直接支持使用，所以我们需要导入createRequire命令才可以解决方案：需要在使用require之前引入如下代码： //解决使用require的时候报 require is undefined的错误 import { createRequire } from 'module'; const require = createRequire(import.meta.url); ...

解决前端vue中的Uncaught TypeError: this.Form is undefined

lengdacai66的博客

07-20

2977

报错图片如下：仔细查看，问题出在form这里发现是因为form没有定义在data中定义后，错误消失

[已解决]Vue中控制台提示XXX is not definded错误解决方法

海海不掉头发的的博客

10-14

1万+

项目场景：今天在听老师讲Vue项目的时候出现报的错误。问题描述：项目一致出现XXX is not defined 。 data() { var validatePass = (rule, value, callback) => { var oldPw = /^[a-zA-Z0-9]{3,15}$/; if (value == "") { callback(new Error("请输入密码")); } else {

学习vue3 element-plus

最新发布

05-01

### Vue3 和 Element-Plus 的学习教程与使用指南 #### 一、Vue3 和 Element-Plus 的简介 Vue3 是 Vue.js 的最新版本，提供了许多新特性和改进，例如组合式 API（Composition API）、更好的性能优化以及更强大的响应式系统。Element-Plus 则是一个基于 Vue3 的 UI 组件库，它继承了 Element-UI 的设计理念并进行了全面升级，支持 TypeScript 并兼容现代浏览器。通过结合 Vue3 和 Element-Plus，开发者可以快速构建现代化的前端应用，尤其是后台管理系统[^1]。 --- #### 二、安装和配置 Vue3 及 Element-Plus ##### 1. 初始化 Vue3 项目可以通过 Vue CLI 或 Vite 来创建一个新的 Vue3 项目。以下是使用 Vite 创建项目的命令： ```bash npm init vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` 这将生成一个基于 Vue3 和 TypeScript 的项目模板[^5]。 ##### 2. 安装 Element-Plus 在初始化完成后，需要安装 Element-Plus： ```bash npm install element-plus ``` 为了减少打包体积，推荐按需加载组件。可以借助 `unplugin-vue-components` 插件实现自动导入功能： ```bash npm install unplugin-vue-components unplugin-auto-import -D ``` 随后，在 `vite.config.ts` 中进行如下配置： ```typescript import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], } ``` 最后，在 `main.ts` 文件中引入必要的样式文件即可完成基本配置[^4]： ```typescript import { createApp } from 'vue'; import App from './App.vue'; // 引入 Element-Plus import 'element-plus/dist/index.css'; import ElementPlus from 'element-plus'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` --- #### 三、常用的功能与实践案例 ##### 1. 页面布局设计 Element-Plus 提供了一套完整的布局工具，包括栅格化系统 (`el-row`, `el-col`) 和容器组件 (`el-container`, `el-header`, `el-footer`, `el-main`, `el-aside`)。以下是一个简单的页面布局示例： ```html <template> <el-container style="height: 100vh; border: 1px solid #eee;"> <el-aside width="200px">  <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template #title><i class="el-icon-message"></i>导航一</template> <el-menu-item-group title="分组一"> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px;"> 用户名 </el-header> <el-main> <h1>欢迎来到主页</h1> </el-main> </el-container> </el-container> </template> ``` 此代码展示了如何利用 `el-container` 实现经典的左侧菜单加右侧主要内容区域的布局方式[^4]。 ##### 2. 表单验证 表单是后台管理系统中的重要组成部分。Element-Plus 支持内置的表单校验机制，配合 Vue3 的双向绑定特性能够轻松实现复杂的交互逻辑。 ```html <template> <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="formData.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(formRef)">提交</el-button> </el-form-item> </el-form> </template> <script lang="ts" setup> import { reactive, ref } from 'vue'; import type { FormInstance } from 'element-plus'; interface FormData { username?: string; password?: string; } const formRef = ref<FormInstance>(); const formData = reactive<FormData>({}); const rules = { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], }; function submitForm(formEl: FormInstance | undefined) { if (!formEl) return; formEl.validate((valid) => { if (valid) console.log('提交成功:', formData); else console.error('验证失败!'); }); } </script> ``` 这段代码演示了一个带有必填字段校验的登录表单[^5]。 --- #### 四、总结以上内容涵盖了 Vue3 和 Element-Plus 的基础知识及其实际应用场景。对于初学者来说，建议从官方文档入手，并逐步尝试搭建小型项目来巩固所学知识点[^1][^2][^3]。 ---