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 进行扩展,比如增加正则表达式验证邮箱格式、数字范围验证等。

相关推荐
abigale034 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者24 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile28 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399730 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊36 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火36 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码