深入浅出掌握Element UI表单验证规则

前端

2023-05-04 20:30:31

Element UI 表单验证规则：轻松搞定数据校验，告别报错烦恼

在前端开发中，表单验证是一个不可或缺的环节。它可以确保用户输入的数据符合特定规则，从而避免数据不合法而导致系统问题。Element UI 作为一款强大的前端 UI 框架，提供了丰富的表单验证规则，让开发者轻松实现数据校验，告别报错烦恼。

一、表单验证规则介绍

Element UI 的表单验证规则是一组预定义的正则表达式和错误消息，用于检查表单数据的格式是否正确。正则表达式负责匹配数据格式，而错误消息则提示用户数据不合法的原因。

二、规则定义

在 Element UI 中，表单验证规则使用对象形式定义，每个规则对应一个表单字段的验证。规则对象包含以下属性：

required: 是否必填，布尔值
message: 错误提示信息，字符串
trigger: 触发验证的方式，字符串（可选，默认 blur）

const rules = {
  username: [
    { required: true, message: '用户名不能为空' },
    { pattern: /^\w{6,12}$/, message: '用户名必须是6-12个字母或数字' }
  ],
  password: [
    { required: true, message: '密码不能为空' },
    { pattern: /^.{6,16}$/, message: '密码必须是6-16个字符' }
  ]
};

三、规则应用

将表单验证规则应用到表单上非常简单，只需在表单组件上设置 rules 属性，并传入规则对象即可。

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