Vue表单组件el-form校验规则rules属性

前言

文章如果有错误或者不规范的地方请指出来，一起加油，感谢大家观看！！！

一、基本用法

rules是一个对象，其中每个键对应表单中的一个字段名，值是一个数组，数组中的每个元素代表对该字段的一个校验规则。

二、校验规则

• required：表示该字段是否必填。如果设置为true，当该字段为空时会触发相应的错误提示。

• pattern：使用正则表达式进行格式校验。例如，对邮箱地址的校验使用了正则表达式来确保输入的是正确的邮箱格式。

• message：当校验不通过时显示的错误提示信息。

• trigger：指定触发校验的时机，可以是'blur'（失去焦点）、'change'（值改变）等。

• type: 指定校验的数据类型，如 'string'、'number'、'email'、'url' 等。

• min 和 max: 指定字符串长度或数值的范围，只在 type 为 'string' 或 'number' 时有效。

• 自定义校验函数: 可以通过 validator 属性定义一个自定义的校验函数。

三、示例代码

<template>
  <el-form :model="formData" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

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

export default {
  setup() {
    const formData = ref({
      username: '',
      email: ''
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    };

    const submitForm = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          console.log('表单验证通过，提交数据：', formData.value);
        } else {
          console.log('表单验证不通过');
        }
      });
    };

    return {
      formData,
      rules,
      submitForm
    };
  }
};
</script>

• 当该字段为空时，在指定的触发时机（如trigger: 'blur'失去焦点时）会触发错误提示 “请输入用户名”。

• 使用正则表达式对邮箱地址进行校验。只有当输入的内容符合正则表达式的格式要求时，才认为是有效的邮箱地址。如果不符合，在触发时机时会显示 “请输入正确的邮箱地址” 的错误提示。

四、动态校验规则

可以根据表单中的其他字段的值或者特定的条件动态地设置校验规则。

const rules = {
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 10, message: '密码长度应在6到10个字符之间', trigger: 'blur' },
    ],
    confirmPassword: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value === formData.value.password) {
            callback();
          } else {
            callback(new Error('两次输入的密码不一致'));
          }
        },
        trigger: 'blur'
      }
    ]
};

在这个例子中，有两个字段的校验

• 密码不能为空，长度应在6到10个字符

• 自定义校验函数用于验证 “确认密码” 字段与 “密码” 字段的值是否一致。如果一致，调用callback()表示校验通过；如果不一致，调用callback(new Error('两次输入的密码不一致'))返回错误信息。