vue3+ts的elemetplus表单校验

Vue 3 结合 TypeScript 和 Element Plus 实现表单校验是一个现代化的前端开发方案。Element Plus 是基于 Vue 3 的一套桌面端组件库，它继承了 Element UI 的优秀基因，为开发者提供了丰富的组件和功能。在使用 TypeScript 进行类型安全检查的同时，可以利用 Element Plus 的表单组件来进行表单的创建和校验。

在 Vue 3 中使用 Element Plus 进行表单校验的基本步骤如下：

1. 安装 Element Plus 并在项目中引入需要的组件。
2. 在组件的 `data` 函数中定义表单数据和校验规则。
3. 使用 `ref` 或 `reactive` 创建响应式数据。
4. 在模板中使用 Element Plus 的表单组件（如 `el-form`, `el-form-item`, `el-input` 等）。
5. 应用 `:rules` 属性绑定表单校验规则，并使用 `v-model` 进行双向数据绑定。
6. 在适当的位置（如按钮的点击事件中）调用表单的校验方法，例如 `this.$refs.form.validate()`。

下面是一个简单的例子：

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const form = reactive({
      username: '',
      password: ''
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ]
    };

    const submitForm = () => {
      const formRef = ref as any;
      formRef.value.validate((valid) => {
        if (valid) {
          // 提交表单数据...
          console.log('提交的数据：', form);
        } else {
          console.log('校验失败');
          return false;
        }
      });
    };

    return {
      form,
      rules,
      submitForm
    };
  }
});
</script>

这个例子中展示了如何在 Vue 3 的单文件组件中使用 Element Plus 的表单校验功能。注意，在 TypeScript 环境下，需要对 `ref` 进行类型断言，以便可以访问 Element Plus 的校验方法。