vue3.0+element Plus表单校验

在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。

下面是一个使用Element Plus表单校验的示例：

1. 在Vue3.0项目中，首先需要先安装Element Plus组件库：

npm install element-plus --save

2. 在需要使用表单校验的组件中，引入Element Plus的表单组件和校验规则：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <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>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const form = ref({
      username: '',
      password: '',
    });

    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' },
      ],
    });

    const submitForm = () => {
      // 表单校验
      const formRef = this.$refs.form;
      formRef.validate((valid) => {
        if (valid) {
          // 校验通过
          console.log('submit');
        } else {
          // 校验不通过
          console.log('error submit!!');
          return false;
        }
      });
    };

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

在上面的示例中，我们使用了Element Plus的表单组件和校验规则来实现表单校验，其中：

- `ElForm`：表单组件，用于包裹需要校验的表单项；
- `ElFormItem`：表单项组件，用于包裹表单控件和校验规则；
- `ElInput`：输入框组件，用于输入表单数据；
- `ElButton`：按钮组件，用于提交表单数据；
- `ref`：Vue3.0中用于获取组件实例的方法。

在`setup()`函数中，我们使用了`ref`来定义表单数据和校验规则，并且定义了一个`submitForm()`方法来提交表单数据，其中：

- `validate()`：表单校验方法，用于校验表单数据是否满足校验规则；
- `valid`：校验结果，如果校验通过则为`true`，否则为`false`。

总体来说，使用Element Plus的表单校验功能非常简单，只需要在需要校验的表单项中定义相应的校验规则，并在提交表单时调用`validate()`方法即可。