Vue3 el-form提交验证写法

舒颜。

已于 2023-03-10 10:50:48 修改

阅读量817

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-07 09:27:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44714430/article/details/129375422

版权

这篇文章介绍了如何在Vue3环境下使用El-Element的表单组件进行验证和重置操作。通过`<el-form>`标签设置规则，结合`ref`和`validate`方法实现表单验证，点击确定按钮时若验证通过则关闭对话框并调用接口，否则返回false。同时展示了`resetForm`函数用于重置表单字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<el-form label-width="80px" :rules="rules" ref="ruleFormRef" :model="addUser">
</el-form>
<template #footer>
     <span>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="DialogConfirm">确 定</el-button>
     </span>
</template>
<script setup>
 const rules=reactive({})
 const ruleFormRef = ref()
 //重置
 const resetForm =()=>{
  ruleFormRef.value.resetFields();
}
//提交
 const DialogConfirm = async()=>{
    if (!ruleFormRef) return;
      ruleFormRef.value.validate((valid) => {
        if (valid) {
            dialogVisble.value = false; 
            //写请求接口
        } else {
          return false;
        }
      });
    }
 <script setup>