Vue + ElementUI实现自定义正则规则验证：超详细指南

2023-12-15 05:14:55

前言

在前端开发中，表单验证是必不可少的一环。为了确保用户输入的数据准确无误，我们需要对表单进行验证。其中，使用正则表达式进行数据验证是一种非常有效的方法。正则表达式是一种强大的文本搜索和替换工具，它可以帮助我们快速检查输入的数据是否符合预期的格式。

准备工作

在开始动手之前，我们需要先做一些准备工作：

熟悉正则表达式的语法和用法。如果您不了解正则表达式，可以先查阅相关资料或教程。
安装Vue和ElementUI库。
创建一个新的Vue项目。
在项目中引入ElementUI库。

使用Vue和ElementUI实现自定义正则规则验证

引入ElementUI库

在main.js文件中引入ElementUI库：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

创建表单

在Vue组件中创建表单：

<template>
  <form @submit.prevent="onSubmit">
    <el-form-item label="姓名：">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label="电话号码：">
      <el-input v-model="phone"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码：">
      <el-input v-model="idNumber"></el-input>
    </el-form-item>
    <el-form-item label="电子邮件地址：">
      <el-input v-model="email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: '',
      idNumber: '',
      email: ''
    };
  },
  methods: {
    onSubmit() {
      // 表单验证
      if (!this.validate()) {
        return;
      }

      // 表单提交
      // ...
    },
    validate() {
      // 电话号码验证
      if (!this.validatePhone(this.phone)) {
        this.$message.error('请输入正确的电话号码！');
        return false;
      }

      // 身份证号码验证
      if (!this.validateIdNumber(this.idNumber)) {
        this.$message.error('请输入正确的身份证号码！');
        return false;
      }

      // 电子邮件地址验证
      if (!this.validateEmail(this.email)) {
        this.$message.error('请输入正确的电子邮件地址！');
        return false;
      }

      return true;
    },
    validatePhone(phone) {
      // 正则表达式：匹配中国大陆手机号码
      const phoneRegex = /^1[3-9]\d{9}$/;

      return phoneRegex.test(phone);
    },
    validateIdNumber(idNumber) {
      // 正则表达式：匹配中国大陆身份证号码
      const idNumberRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

      return idNumberRegex.test(idNumber);
    },
    validateEmail(email) {
      // 正则表达式：匹配电子邮件地址
      const emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      return emailRegex.test(email);
    }
  }
};
</script>

定义自定义正则规则

在Vue组件中定义自定义正则规则：

// 电话号码验证规则
export const phoneRule = {
  validator(rule, value, callback) {
    if (!this.validatePhone(value)) {
      callback(new Error('请输入正确的电话号码！'));
    } else {
      callback();
    }
  }
};

// 身份证号码验证规则
export const idNumberRule = {
  validator(rule, value, callback) {
    if (!this.validateIdNumber(value)) {
      callback(new Error('请输入正确的身份证号码！'));
    } else {
      callback();
    }
  }
};

// 电子邮件地址验证规则
export const emailRule = {
  validator(rule, value, callback) {
    if (!this.validateEmail(value)) {
      callback(new Error('请输入正确的电子邮件地址！'));
    } else {
      callback();
    }
  }
};

在表单中使用自定义正则规则

在表单组件中使用自定义正则规则：

<template>
  <el-form :model="formData" :rules="formRules">
    <!-- ... -->
    <el-form-item label="电话号码：" prop="phone">
      <el-input v-model="formData.phone"></el-input>
    </el-form-item>
    <!-- ... -->
  </el-form>
</template>

<script>
import { phoneRule, idNumberRule, emailRule } from './customRules';

export default {
  data() {
    return {
      formData: {
        // ...
        phone: ''
        // ...
      },
      formRules: {
        // ...
        phone: [phoneRule],
        // ...
      }
    };
  }
};
</script>

提交表单

点击提交按钮时，触发onSubmit方法，对表单数据进行验证：

onSubmit() {
  this.$refs.form.validate((valid) => {
    if (valid) {
      // 表单提交
      // ...
    } else {
      this.$message.error('请更正错误后再提交！');
    }
  });
}