Vue3.0+Ts+Element表单校验

当使用Vue 3和Element Plus创建一个表单并希望应用表单校验时，需要遵循一些关键步骤。本教程将指导你完成这个过程，并帮助你解决常见的问题。

步骤 1：设置基本的Vue 3和Element Plus环境

首先，确保你已经创建了一个Vue 3项目并安装了Element Plus。你可以使用Vue CLI创建项目并在项目中添加Element Plus。确保你已经在你的项目中正确导入Element Plus和Vue 3。

步骤 2：创建表单

在Vue组件中创建一个表单。这可以通过使用Element Plus的<el-form>组件来实现。在你的模板中定义表单字段，并使用v-model将字段与数据绑定起来。

<template>
 <el-form :model="form">
     <el-form-item label="用户名">
          <el-input v-model="form.username" />
              </el-form-item>
                  <el-form-item label="密码">1      <el-input type="password" v-model="form.password" />
    </el-form-item>
    <!-- 添加其他表单字段 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

在这个示例中，我们创建了一个包含用户名和密码字段的表单，并将其与form数据对象绑定。

步骤 3：定义表单校验规则

在Vue组件的 <script setup> 部分，定义表单校验规则。使用FormRules类型定义你的校验规则，确保规则与表单字段名称匹配。

<script setup>
import { ref, reactive } from 'vue'
import type { FormRules } from 'element-plus'

const form = reactive({
  username: '',
  password: '',
})

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // 添加其他校验规则
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // 添加其他校验规则
  ],
})

</script>

在这个示例中，我们使用了FormRules类型来定义校验规则。每个表单字段都有一个校验规则数组，包括必填校验和其他校验规则。

步骤 4：手动触发表单校验

要在表单提交时触发校验，创建一个提交表单的方法，并在方法内部使用validate方法来手动触发校验。

<script setup>
import { ref, reactive } from 'vue'
import type { FormRules, FormInstance } from 'element-plus'

const form = reactive({
  username: '',
  password: '',
})

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // 添加其他校验规则
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // 添加其他校验规则
  ],
})

const formRef = ref<FormInstance | null>(null)

const submitForm = async () => {
  if (!formRef.value) return

  const valid = await formRef.value.validate()

  if (valid) {
    // 提交表单数据或执行其他操作
    console.log('表单校验通过，提交表单数据')
  } else {
    console.log('表单校验失败，请检查表单字段')
  }
}
</script>

确保你的提交按钮上使用@click监听器调用submitForm方法。

步骤 5：在模板中显示错误信息

最后，在模板中为每个表单字段添加错误信息的显示位置。你可以使用<el-form-item>的:error属性来显示错误消息。

<el-form-item label="用户名" :error="rules.username[0].message">
  <el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码" :error="rules.password[0].message">
  <el-input type="password" v-model="form.password" />
</el-form-item>

这将根据校验规则显示相应的错误消息。

步骤 6：运行你的Vue 3应用

最后，确保你运行你的Vue 3应用，访问包含你的表单的页面，并测试表单校验是否按预期工作。

如果你的表单校验仍然不起作用，确保检查以下方面：

• 表单字段名称是否与校验规则匹配。
• 错误信息是否显示在正确的位置。
• 你是否在按钮点击事件中正确触发了表单校验。

遵循这些步骤，你应该能够在Vue 3和Element Plus中成功实现表单校验。