vue3 elementui多个表单校验

在Vue3中，可以使用Element UI实现多个表单校验。

首先，我们需要安装Element UI库，并在Vue组件中引入所需的表单组件。

npm install element-plus

然后，在Vue组件中引入Element UI库和所需的表单组件。

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="validateForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const formData = ref({
      name: '',
      age: '',
    });

    const formRules = ref({
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须是数字', trigger: 'blur' },
        { min: 18, max: 100, message: '年龄必须在18到100之间', trigger: 'blur' },
      ],
    });

    const validateForm = () => {
      // 触发表单校验
      ref.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，可以进行提交操作
          console.log('表单校验通过');
        } else {
          // 表单校验失败，无法提交
          console.log('表单校验失败');
        }
      });
    };

    return {
      formData,
      formRules,
      validateForm,
    };
  },
};
</script>

上述代码中，使用了`ElForm`、`ElFormItem`、`ElInput`和`ElButton`这些Element UI的表单组件来实现多个表单校验。这里定义了两个表单项"姓名"和"年龄"，分别设置了校验规则。通过点击提交按钮时，调用`validateForm`方法来触发表单校验，并根据校验结果进行相应的操作。

以上就是在Vue3中使用Element UI实现多个表单校验的方法。