Vue Element-ui Form表单使用

已于 2023-06-01 11:06:08 修改
阅读量4.5k 收藏 15
点赞数 10
文章标签： vue.js
于 2019-10-08 19:16:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43639373/article/details/102405646
版权
本文介绍了Vue Element-ui框架中Form表单的使用，特别是聚焦于表单的规则验证封装，包括身份证、手机号和图形码的校验。通过集中定义验证规则，实现了表单验证的高效管理。示例中展示了如何利用属性进行局部和全局校验，以及在点击提交时触发的方法来判断验证状态。
摘要由CSDN通过智能技术生成

Vue Element-ui Form表单使用

在面对项目中大量的表单提交以及规则验证，Element-ui Form表单是我们最好的帮手，下面介绍一下form表单的使用方法以及规则校验的封装。

el-form

在这里插入图片描述
为了将所有表单的规则校验封装在一起 我们需要在el-form加rules属性，rules可以在data当中定义一个全局的变量。
model上的applyForm是一个data中定义的变量,需要注意的是在做规则校验的时候applyForm，rules中的变量名字需要对应。下边是定义的代码。
在这里插入图片描述在这里插入图片描述
以上代码将所有表单的验证规则写在一起，带有validator自定义属性验证，我做了一系列的处理，比如一些手机号验证，身份证验证等等

身份证校验

最低0.47元/天 解锁文章
白了fo伦
关注
  • 10
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt Creator Qt Quick用户界面表单ui-forms
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-15 990
Qt Creator Qt Quick用户界面表单Qt Quick用户界面表单支持的方法JavaScript函数Qt QML方法使用Qt快速UI表单 Qt Quick用户界面表单 您可以使用Qt Creator向导来创建扩展名为.ui.qml的UI表单。UI表单包含QML语言的纯声明性子集。建议您在“设计”模式下编辑表单。Qt Creator通过显示错误消息来强制使用受支持的QML功能。 不支持以下功能： JavaScript块 除纯表达式外的其他绑定 信号处理器 除根项目外的其他项目中的状态 不是从QQu
Vue form表单的应用
qq_48431032的博客
08-25 433
Vue form表单的应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&g
Vue+ElementUi - Form表单
zs1972551648的博客
05-16 906
通过Vue+ElementUi实现Form表单一些输入框、复习框、单选框、时间框 箭头函数与普通方法的不同 this定义位置不同获取不同数据
vue+element-ui el-form表单项简写
qq_42598491的博客
08-23 579
公司项目偏向于后台管理系统，其中表单新增数据，数据回显修改，删除的业务逻辑居多，以前开发时，会定义一个form对象，然后在定义对象里的属性名和属性值类型，之后在映射到页面的表单v-model指令里 <template> <div> <el-form> <el-form-item label="开课年级" prop="gradeId"> <el-select v-model="form.gradeId
详细讲解Element UI 中丰富的表单控件（图文解析）
最新发布
码农研究僧的博客
06-12 2321
Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件
Input 输入框
weixin_30711917的博客
03-13 510
Input 输入框 通过鼠标或键盘输入字符 <el-input v-model="input" placeholder="请输入内容"></el-input> <script> export default { data() { return { input: '' } } } </scri...
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
使用 Vue-Sku-Form 时，首先需要通过 npm 或 yarn 安装，然后在 Vue 项目中导入并注册组件，最后在模板中使用，即可快速创建出符合业务需求的 SKU 表单。 总结来说，Vue-Sku-Form 是一个强大的电商 SKU 表单解决...
vue+element-ui使用
01-06
Element UI 还提供了很多其他功能强大的组件，比如对话框（`el-dialog`）、表单组件（`el-form`、`el-input` 等）、导航（`el-menu`、`el-breadcrumb` 等）和数据展示组件（`el-table`、`el-tree` 等）。每个组件都...
unity UIForm窗体框架
Peter的博客
03-05 1854
为什么要使用UI框架？直接使用NGUI或UGUI一拖一拉直接搭载出界面不就行了？ 我相信很多小白，包括我在刚学习Unity3D UI的时候都这样想过。 我的第一款款Unity2D游戏《山地赛车》，使用的就是NGUI搭载界面。 弱联网手游一般都没什么复杂的界面，我也是很轻松花一天就把界面搭载好了，看起来好挺好看的，还花了不少时间做动态效果。 界面搭载好后，开始开发游戏内容，这下问题开始...
表单html ui,ui-form.html
weixin_35703300的博客
06-18 72
Form Elements - MaterialmenuMaterialJohn SmithMaterialCardsCollapsible RegionsDropdownsModals & ToastsNavsProgress BarsTabsTilesButtonsForm ElementscloseaddForm Elements (materialised)IconsTablesF...
pyqt5 加载UI_form
qq_33095999的博客
03-24 481
pyqt5 加载UI_form
vue element-ui 单独引入表单规则 减少页面结构
qq_43634411的博客
11-03 670
对比一下单独引入表单规则和 写在页面的表单规则 没有外部引入表单规则 <!-- --> import { callbackify } from 'util'; <template> <body id="poster"> <el-form class="login-container" :rules="rules" ref="loginForm" :model="loginForm" label-positio
unity UIForm框架的核心功能逻辑- UI管理器
Peter的博客
03-07 830
UI框架核心的四个类： UIManager（窗体UI管理器）， BaseUIForm （窗体UI基类）， UIType （ 窗体类型）， SysDefine （公用对象定义） 下面是UI窗体管理器 UIManager using System.Collections; using System.Collections.Generic; using UnityEngine; /// &...
UI组件库Form表单_数字类型验证之坑&实现数字框
Mr.小灰狼_随笔
03-22 2280
万万没想到只是想实现一个 仅能输入数字的输入框 这么费劲啊，大无语事件。。
Vue+Element-UI 使用 Vform 表单设计器
weixin_71933203的博客
08-29 6003
6.2、触发点击事件 使用axios与WebApi接口交互 将设计好的表单 以json的字符串的形式 保存到后台数据库。2、后台.Net Core WebApi增删改查接口照常写 注意添加修改时要通过post,FromBody进行传参。6.3.2、使用 axios 调用 WebApi 接口对组件进行赋值 使用此方法。、如果想要把你存入到数据库中表单数据进行修改。6、将设计好的表单保存到数据库中。5、运行后的页面效果 托拉拽控件。6.3、使用Vform渲染页面。1、表单设计器基础字段建议。......
elementUI弹框form多元素表单问题 - 抛砖篇
草巾冒小子的博客
04-15 7297
疑问1：elementUI的这个MessageBox弹框能否添加多个表单元素? 疑问2：如果能添加多个，怎么添加？ 疑问3：使用el-dialog组件如何调用？ 通过上述实践，总结发现还是使用el-dialog组件，比较坑少，直接，出效率！ 而且该组件还支持： 嵌套 Dialog 的场景，能有效避免 遮罩层级的样式 bug ~~ 正常情况下，我们不建议使用嵌套的 Dialog， 如果需要...
vue+element-ui form表单中显示图片
10-08
在Vue Element-UI的表单中显示图片，你可以使用Element-UI的Upload组件来实现。 首先，你需要在表单中添加一个Upload组件，用来上传图片： ```vue <template> <el-form> <el-form-item label="图片"> <el-upload class="upload-demo" action="/upload" // 这里需要填写图片上传的接口地址 :show-file-list="false" :on-success="handleSuccess" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> <img v-if="imageUrl" :src="imageUrl" style="max-width: 200px; max-height: 200px;" /> </el-form-item> </el-form> </template> <script> export default { data() { return { imageUrl: '' // 用来存储图片的URL } }, methods: { handleSuccess(response, file) { // 在上传成功后，将返回的图片URL赋值给imageUrl this.imageUrl = response.url; } } } </script> <style> .upload-demo { border: 1px dashed #ccc; border-radius: 6px; padding: 20px; text-align: center; } </style> ``` 在上述代码中，我们使用了`el-upload`组件来实现图片的上传功能。在上传成功后，会调用`handleSuccess`方法，将返回的图片URL赋值给`imageUrl`，然后在页面上使用`img`标签来显示图片。 请注意，你需要将`action`属性设置为你自己的图片上传接口地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值