Vue3+element-plus项目开发小结（validate）

最新推荐文章于 2024-04-08 22:55:07 发布
最新推荐文章于 2024-04-08 22:55:07 发布
阅读量635 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyeei/article/details/132561121
版权
  • 表单校验的绑定（父子组件嵌套）

 这里的ref实例对象是确保子组件ref="metaTagForm"不能为空值设立的。

父组件为dialog弹窗

 子组件是嵌套其中的form表单

vue3的表单校验和vue2的大差不差，

首先 :rules="rules" 为表单绑定规则，然后rules声明之后为标注了prop类型的formitem进行配对设置校验

这里需要注意的是vue3需要额外注册 FormRules，FormInstance

最低0.47元/天 解锁文章
sunyeei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-form-validation：Vue 3中的DIY表单验证
02-11
vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue3-form-validation:用于表单验证的Vue撰写功能
04-03
Vue 3的表单验证 用于表单验证的Vue合成功能。 :milky_way: 用TypeScript编写 :water_wave: 动态表格支持 :fallen_leaf: 轻的 npm install vue3-form-validation 验证是异步的，并且正在使用Promise.allSettled 。 :backhand_index_pointing_right: 在上查看示例用法。 原料药 该包导出一个函数useValidation ，以及使用TypeScript时的一些类型定义。 const { form , errors , submitting , validateFields , resetFields , add , remove } = useValidation < T> ( formData ) ; useValidation采用以下参数： formData 类型- object 描述-表单数据的结构。 表单数据对象的结构类似于您将为
Vue3 | Element-Plus | 表单校验 | form | Validate|提交时调用validate()函数
weixin_53377575的博客
11-16 4746
【代码】Vue3 | Element-Plus | 表单校验 | form | Validate。
Element Plus 表单校验
最新发布
哈
04-08 399
"用户名长度在 3 到 5 个字符"
Vue3的表单事件优雅写法
css_javascrpit的博客
06-14 393
优雅的写出V3表单事件
vue使用验证器: VeeValidate3
weixin_42190182的博客
07-03 317
我用的是版本为3.3.72.1.5VeeValidate 的使用场景以及配置。
vue3 行内校验规则 rules validate校验
卡农的魔笛
07-20 5245
【代码】vue3 行内校验规则 rules validate校验。
vue3+element-plus validate校验
Florenza的博客
01-11 4311
预期效果:点击确定 校验输入框内容 由于文档上写的比较模糊 经尝试结果代码应为 <template> <el-form :ref="formdata" :model="form"> <el-radio-group v-model="form.isCache"> <el-radio label="0"> 缓存 ...
element-plus表单验证使用 个人总结
热门推荐
ymzhao
10-18 4万+
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
vue3 element-plus 封装 validate-select
green_dream123的博客
10-21 414
组件代码 <template> <div :style="divStyleInternal"> <label class="left-label" :style="lStyle">{{ label }}</label> <div class="inline" :style="sStyle"> <el-tooltip :placement="tooltipPlace" :content="errInfo" v-m
表单校验实现 vue3---(vee-validate 插件)
grow_的博客
01-09 1610
4. 发生表单校验错误，显示错误类名`error`，提示红色边框并显示`errors`对象中的错误提示信息。3. `Field`添加v-model，作用是提供表单数据的双向绑定。1）安装校验插件 `vee-validate` -------------有些时候注意版本。3）定义校验规则 `src/utils/vee-validate-schema.js`2）导入校验组件并注册-----------那个表单验证就导入那个组件。5）使用 `Field` 组件，添加表单项目校验。
Vue3实现登录表单验证
前端小攻城狮的博客
06-14 6895
使用async-validator实现表单验证
vue表单验证你真的会了吗？vue表单验证（form）validate
10-17
主要介绍了vue表单验证你真的会了吗？vue表单验证（form）validate,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
基于vue3+element-plus+springboot+mybatis+jpa+mysql的学籍管理系统源码
06-03
本系统作为vue3初学者的入门系统，通过开发经典的《学籍管理系统》模拟项目，使vue2的初学者快速掌握从无到有的搭建一套vue3+element-plus前端+spring boot后端+mysql数据库的前后端分离的现代主流项目架构。...
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
vue3 el-form表单验证 自定义校验
a965412234的博客
07-29 2051
这里做的是表单的添加标签 const addRules = { tagList: [ { required: true, message: '请选择推送客户名单', trype: 'array', validator: validatePass, trigger: 'change' } ] } const validatePass = (rule, val
vue3+element-plus 表单验证
04-27
在 Vue3 中使用 Element Plus 进行表单验证可以按照以下步骤进行： 1. 安装 Element Plus 和 VeeValidate ``` npm install element-plus vee-validate@next ``` 2. 在 main.js 中引入 Element Plus 和 VeeValidate ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { defineRule, ErrorMessage, configure } from 'vee-validate' import { required, min, max, email } from '@vee-validate/rules' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 注册 VeeValidate 规则 defineRule('required', required) defineRule('min', min) defineRule('max', max) defineRule('email', email) // 配置 VeeValidate configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, min: `${field}至少为${rule.params.min}个字符`, max: `${field}不能超过${rule.params.max}个字符`, email: `${field}必须是有效的邮箱地址` } return messages[rule.name] || `${field}无效` } }) app.component('ErrorMessage', ErrorMessage) app.mount('#app') ``` 3. 在组件中使用 VeeValidate ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> <error-message name="username"></error-message> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> <error-message name="password"></error-message> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { defineComponent } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default defineComponent({ setup() { const { handleSubmit, resetForm, errors, setErrors } = useVeeValidate() const form = { username: '', password: '' } const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 16, message: '用户名长度在 6 到 16 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' } ] } const submitForm = handleSubmit(async () => { // 提交表单逻辑 }) return { form, rules, submitForm, resetForm, errors, setErrors } } }) </script> ``` 在这个例子中，我们使用了 `useVeeValidate()` hook 来管理表单验证，定义了一个 `form` 对象来存储表单数据，定义了 `rules` 对象来定义表单验证规则，使用了 `handleSubmit()` 方法来触发表单提交逻辑，并且使用了 `ErrorMessage` 组件来展示错误信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值