Vue中form表单遇到的问题

最新推荐文章于 2024-03-26 09:56:49 发布
最新推荐文章于 2024-03-26 09:56:49 发布
阅读量2.3k 收藏
点赞数
分类专栏： Vue学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oracle11770/article/details/80833290
版权

1，表单验证

a, 注意(rule, value, callback) value存在undefined的情况；

b, 校验如果提示英文，大概是什么什么溢出，查看是不是校验里面存在校验其他组件的情况。

c, 如果想获取某个组件的校验结果，校验方法需要自己调一下。不建议重新掉form的validate，效率太低。

d, form表单加loading效果，就加载form表单上吧；

2，select赋值

a, 键值不是id,label的时候，利用item数据调用数据格式的key即可；如果是数组，直接使用item

oracle11770
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【无标题】
weixin_42786150的博客
02-17 1万+
ar privacy2
vue获取form表单的值示例
10-16
今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 解决form表单提交但不跳转页面的问题
10-16
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
推荐强大前端表单设计库：Avue-Form-Design
最新发布
gitblog_00082的博客
03-26 422
推荐强大前端表单设计库：Avue-Form-Design 项目地址:https://gitcode.com/sscfaith/avue-form-design 项目简介 Avue-Form-Design 是一个基于 Vue.js 的前端组件库，特别关注于动态表单的设计与构建。它提供了一套可视化的设计工具，允许开发者通过拖拽的方式快速创建和配置复杂的表单，显著提高了开发效率。 技术分析 基于Vue....
vue3.0+ts实现表单验证及解决vue-i18n表单验证rules自动触发问题
望南
04-08 4162
解决vue-i18n表单验证rules自动触发问题技术栈 vue3.0+ts+element-plus问题就像下面图片所展示，我们每次点击右侧语言切换的时候，都会触发表单的rules，我们没有动表单，还是会出现验证信息. 技术栈 vue3.0+ts+element-plus 问题就像下面图片所展示，我们每次点击右侧语言切换的时候，都会触发表单的rules，我们没有动表单，还是会出现验证信息. 1、因为我们要实现如果在验证的中途切换的语言的时候，error message也会跟着触发，所以我们将代码写到com
Vue.js 2.x笔记：基本语法（2）
weixin_34120274的博客
06-08 541
1. Vue实例及选项 1.1 创建Vue实例（new Vue instance） 　　每个Vue Application必须创建一个root Vue Instance。 <script> var vm = new Vue({ }); </script> 　　一个Vue实例相当于一个MVVM模式中的ViewModel。在创建Vue实...
学习vue遇到的一些问题（自用）
MagicCat_TJY的博客
03-25 3711
模块“"c:/Users/lenovo/Desktop/graduation_project/manageWebsites/vuecode/src/components/HeaderCom.vue"”没有默认导出。在src 文件夹下创建一个canvas-sign .d.ts 的文件。方案二、根目录新建tsconfig.json。下创建一个文件env.d.ts的文件。1、检查回调事件名字是不是一致。情况一、vue3.0+js。情况二、vue3.0+ts。根目录新建env.d.ts。
新增表单内容功能报错
m0_47943986的博客
09-17 1398
问题处理
总之我高兴不起来
u011523982的专栏
07-27 1万+
站》、《月球旅行记》等古老影片,影迷都会知道,这不是男 主角的童年,而是“电影”这个百岁老人的童年。不同于《哈利 波特》一样纯粹的儿童奇幻冒险,没有高潮迭起的冒险,没有惊悚奇异的怪物,孩子们或许很难从之间,据说是张伟平觉得投资这么大的电影,花了大价钱请了好莱坞的明星,没有床戏太对不起多花五块钱进影院的观众,于是要求张艺谋加上去的。事实上,这场戏来得并不水到渠成,两人之间的感情铺垫得尚缺火候。虽说一
vue：遇到的坑之-----form属性（element-ui）
cWatermelon的博客
05-14 1710
1.解决输入框输入内容后回车就会刷新页面bug 加一个@submit.native.prevent就可以已解决 原理：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。 <el-form @submit.native.prevent></el-form&...
Houdini VEX 常用函数
热门推荐
xiaoqiao11770的博客
08-30 1万+
几何体(Geomerty) addpoint(添加点) int  addpoint(int geohandle, int point_number) 基于几何体的点序号创建，创建后的点会继承几何体点的所有属性、组、位置等信息。 int  addpoint(int geohandle, vector pos) 基于一个位置信息创建点。 创建成功返回点序号，失败返回-1。 addprim...
vue-form表单验证是否为空值的实例详解
10-16
今天小编就为大家分享一篇vue-form表单验证是否为空值的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue复杂的form表单封装和使用
09-01
1、该组件封装了表单中的输入框、密码框、文本域、下拉框、单选、多选、日期、文件上传、按钮等元素； 2、动态设置表单排列样式； 3、使用slot，灵活修改元素；...7、遇到使用问题可以随时帮助解答。
Vue ElementUI之Form表单验证遇到的问题
12-09
首先说一下 我在form表单里面遇见的坑： 1.例如我要给后台传的不是对象，而是一个数组，怎么写验证？ 2.比如我有四个弹出框，都要做验证，这个时候就要注意了，每一个弹出框的ref都不能给的一样，并且一定要与当前...
Vue3+TS+ElementPlus报错集锦
大香蕉的博客
05-18 6522
不能将命名空间“FormInstance”用作类型。 不能将命名空间“FormRules”用作类型。 模块 ""element-plus"" 没有导出的成员 "FormInstance"。你是想改用 "import FormInstance from "element-plus"" 吗? Vue3引入文件爆红且不提示 不能将类型“.......”分配给类型“ComponentProps 类型“undefined”不能作为索引类型使用 模块的默认导出具有或正在使用专用名称“Props”
vue3.0 + ts 引入详细步骤及语法校验报错解决办法
wanglun_的博客
04-18 1万+
前端时间学习了ts，于是用脚手架搭了个vue3.0+ts+tsx的项目，各种语法校验问题，整理下遇到的问题以及解决办法，分享给大家。共勉！！！
前端学习：vue3.0+tsx网易云移动端仿制版（部分遇到的问题以及解决办法）
qq1274323054的博客
09-26 3820
网易云移动端仿制版 文章目录网易云移动端仿制版概述使用到的技术前端后端思路模块实现vue3.0 CLI 安装需要的配置；配置 rem 布局配置实现全局组件的方式组件之通过方法调用导航栏下面的下划线跟随移动vue3.0 过场动画切换实现黑夜模式问题CSS 中 position:sticky 布局失效的问题引入 swiper6.0 并且在 tsx 中使用时出现警告Transition 在 vue3 且 tsx 语法下的使用无动画效果使用 ref 来获取值时 会提示 该对象可能会 nullaudio 标签的使用方
表单自定义校验获取的value为undefined(element ui)
qq_45331969的博客
09-06 6960
表单自定义校验 先看一段官网代码(取了一小部分)： <el-form :model="ruleForm" :rules="rules"> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> </el-form> export default { data(
vue中form表单的样式
05-05
Vue 中的表单样式可以使用 CSS 或者相关的 UI 框架进行设置，以下是一些基本的表单样式设置： 1. 使用 HTML 自带的表单控件样式： ```html <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"> </form> ``` 2. 使用 Bootstrap 框架的表单样式： ```html <form> <div class="form-group"> <label for="username">用户名：</label> <input type="text" class="form-control" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码：</label> <input type="password" class="form-control" id="password" name="password"> </div> </form> ``` 3. 使用 Element UI 框架的表单样式： ```html <el-form> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> </el-form> ``` 以上是一些基本的 Vue 表单样式设置方法，你可以根据需要选择不同的 UI 框架或者自定义样式来设置表单样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值