Vue 3 中使用 `rules` 进行表单验证

在 Vue 3 中，rules 通常用于表单验证，特别是在结合表单库（如 Element Plus 或 Ant Design Vue）时，rules 是验证器的配置项。这里是一个简单的使用 rules 进行表单验证的示例：

使用 Element Plus 的例子

首先，确保已经安装并引入了 Element Plus：

bash 复制代码

npm install element-plus

Vue 组件代码

vue 复制代码

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 表单数据
    const formData = ref({
      username: '',
      password: ''
    });

    // 验证规则
    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 15, message: '用户名长度应在 3 到 15 个字符之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
      ]
    });

    const formRef = ref(null);

    // 提交表单
    const onSubmit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          alert('表单验证成功！');
        } else {
          alert('表单验证失败！');
          return false;
        }
      });
    };

    return {
      formData,
      rules,
      formRef,
      onSubmit
    };
  }
};
</script>

代码说明

formData ：定义表单的数据，使用 ref 来使其具有响应性。
rules：定义表单的验证规则。每个字段都可以设置多个规则，比如必填、最小长度和最大长度等。
el-form 和 el-form-item ：来自 Element Plus 的组件，用于生成表单结构。prop 属性表示当前验证的字段，rules 通过 :rules 绑定。
onSubmit ：点击提交按钮时会触发验证，调用 validate 方法验证整个表单，验证通过时弹出成功提示，否则弹出失败提示。

你可以根据实际需求对 rules 进行扩展，比如增加正则表达式验证邮箱格式、数字范围验证等。