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>

代码说明

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

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

相关推荐
工业甲酰苯胺5 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in6 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课8 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登9 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js