Element Plus 的 Form 组件表单验证指南

Element Plus 的 Form 组件表单验证指南 🌟

嘿，大家好！今天我们来聊聊 Element Plus 的一个非常实用的功能——表单验证 🎉。无论是在简单的登录页面还是复杂的用户注册表单，验证都是保证用户输入正确性的一个重要步骤。

下面，我们将一步步来看看如何实现一个简单的登录表单验证。💪

项目结构

我们将构建一个非常简洁的登录表单，包括用户名和密码两个字段。简单易上手，这也正是我们需要的，不是么？😄

<template>
  <el-col :span="12" :xs="24">
    <el-form class="login-form" :rules="rules" :model="login_form" ref="login_form_xref">
      <h3>BOSS岗位分析</h3>
      <el-form-item prop="username">
        <el-input :prefix-icon=User v-model="login_form.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" :prefix-icon=Lock v-model="login_form.password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</template>

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

const login_form_xref = ref();
interface RuleForm {
  username: string;
  password: string;
}

const login_form = reactive<RuleForm>({
  username: '',
  password: ''
});

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '用户名必须不为空', trigger: 'blur' },
    { min: 2, max: 4, message: '必须输入不少于2不大于4', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码必须不为空', trigger: 'blur' },
    { min: 2, max: 4, message: '必须输入不少于2不大于4', trigger: 'blur' },
  ]
});

// 验证所有字段
login_form_xref.value.validate();
</script>

关键参数一网打尽 📝

• rules: 这就是我们用来验证各表单字段的地方！它是一个对象，里面定义了每个字段的验证规则。
• model: 你给表单绑定的数据对象，就是我们要验证的具体内容。
• ref: 这是用来获取表单实例的关键，这样我们就可以用 JavaScript 对象来操作你的表单了。
• prop: 用来指明你在验证哪个字段。

验证规则的定义

这里我们简单定义了一些验证规则：

• 对于 username 和 password:
  • 必填项，空的话会提示“用户名（或密码）必须不为空”。
  • 长度需要在 2 到 4 之间，为了简单演示，当然你可以根据实际需求进行调整！

表单验证的触发 📣

我们在点击“登录”按钮的时候触发validate方法，可以对整个表单的内容进行验证。也是可以接收一个回调函数，或者返回一个 Promise 来处理验证结果哦！

小提示：记得处理验证成功或者失败的逻辑，例如在验证成功后提交表单数据等等。

总结

就是这样简单！通过 Element Plus 的 Form 组件，您可以轻松实现用户输入的验证，提升用户体验的同时也让数据更可靠。怎么样，是不是超级简单呢？快去试试吧！😉

当然，如果你有任何问题或者新发现，欢迎留言讨论哦！👥

Happy Coding! 🌈