vue3 elementUI ts 表单验证

在 Vue3 中结合 Element UI 和 TypeScript 进行表单验证，Element UI 提供了丰富的表单组件，并且其官方文档也支持 TypeScript 的使用。你可以利用 Element UI 的内置验证规则，如 `el-form` 的 `validateStatus` 和 `rules` 属性，以及自定义验证函数。

首先，你需要安装必要的依赖，例如：

npm install vue@next @element-plus/core @vue/cli-plugin-element-plus

然后，在 TypeScript 配置中启用 TypeScript 支持：

// vue.config.js
module.exports = {
  transpileDependencies: ['element-plus'],
};

接下来，在模板文件 `.vue` 中，你可以这样创建一个带有验证的表单：

<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="80px">
    <!-- 表单元素 -->
    <el-input v-model="form.name" placeholder="姓名" required></el-input>
    <el-password v-model="form.password" placeholder="密码" rules="{ required: true, min: 6 }"></el-password>
    <!-- 更多验证规则... -->
    <el-button type="primary" @submit.prevent="handleSubmit">提交</el-button>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { ElForm, ElFormItem } from '@element-plus/components';

export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
  },
  setup() {
    const form = ref({
      name: '',
      password: '',
      // ...其他字段
    });

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
      ],
    };

    const handleSubmit = (e) => {
      e.preventDefault(); // 阻止默认提交行为
      if (!this.$refs.form.validate()) {
        return; // 如果验证失败则返回
      }
      console.log('表单数据:', this.form);
      // 实际处理表单提交...
    };

    // 观察数据变化更新验证规则
    watch(form, (_, __) => {
      this.$refs.form.resetFields(); // 清空验证状态
    });

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

在这个例子中，`rules` 对象定义了每个输入框的验证规则。当用户提交表单时，会触发 `handleSubmit` 函数，如果验证通过，可以进一步处理表单数据。