【element】常用 El-Form 自定义表单校验规则实战

常用 El-Form 自定义表单校验规则实战

在 Vue 开发中，Element UI 的 组件为我们提供了强大的表单处理能力，其中就包括自定义校验规则这一重要功能。本文将详细介绍如何为常见的表单字段类型如电话号码、正整数与零、包含负数的数字、任意数字以及电子邮件地址编写自定义校验规则。

一、引入 Element UI 并初始化 Form 组件

首先，在项目中安装并引入 Element UI：

Bash
npm install element-ui --save

然后在 Vue 文件中引入并使用 el-form 组件：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <!-- 表单字段在这里 -->
  </el-form>
</template>

<script>
import { Form, FormItem } from 'element-ui';

export default {
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
  },
  data() {
    return {
      formData: {
        // 初始化表单数据
      },
      formRules: {
        // 表单校验规则将在这里定义
      },
    };
  },
  // ...
};
</script>

二、自定义校验规则实践

1. 电话号码校验

// ...
formRules: {
  phoneNumber: [
    { required: true, message: '电话号码不能为空', trigger: 'blur' },
    {
      validator: function(rule, value, callback) {
        // 匹配中国大陆手机号码
        const reg = /^1[3-9]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入正确的电话号码'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
},
// ...

2. 正整数和零校验

positiveIntegerOrZero: [
  { required: true, message: '必须输入正整数或零', trigger: 'blur' },
  {
    validator: function(rule, value, callback) {
      const reg = /^\d+$/;
      if (!reg.test(value) || Number(value) < 0) {
        callback(new Error('只能输入正整数或零'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },
],

3. 包含负数的数字校验

numberIncludingNegative: [
  { required: true, message: '必须输入数字', trigger: 'blur' },
  {
    validator: function(rule, value, callback) {
      const reg = /^-?\d+(\.\d+)?$/; // 包含负数和小数的数字
      if (!reg.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },
],

4. 数字判断校验（仅限整数）

integer: [
  { required: true, message: '必须输入整数', trigger: 'blur' },
  {
    validator: function(rule, value, callback) {
      const reg = /^-?\d+$/;
      if (!reg.test(value)) {
        callback(new Error('请输入整数'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },
],

5. 邮箱校验

email: [
  { required: true, message: '邮箱不能为空', trigger: 'blur' },
  {
    validator: function(rule, value, callback) {
      const reg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱地址'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },
],

以上就是基于 Element UI 的 组件对几种常见场景下的自定义表单校验规则的实现。实际开发过程中，可以根据具体业务需求灵活调整校验规则。