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

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

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

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

首先,在项目中安装并引入 Element UI:

复制代码
Bash
npm install element-ui --save

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

html 复制代码
<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. 电话号码校验
js 复制代码
// ...
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',
    },
  ],
},
// ...
  1. 正整数和零校验
js 复制代码
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',
  },
],
  1. 包含负数的数字校验
js 复制代码
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',
  },
],
  1. 数字判断校验(仅限整数)
js 复制代码
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',
  },
],
  1. 邮箱校验
js 复制代码
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 的 组件对几种常见场景下的自定义表单校验规则的实现。实际开发过程中,可以根据具体业务需求灵活调整校验规则。

相关推荐
用户516816614584116 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅16 小时前
JavaScript 作用域
前端·javascript
前端缘梦16 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖16 小时前
JS核心知识-事件循环
前端·javascript
Simon_He16 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan17 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪18 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮18 小时前
js符号(Symbol)
前端·javascript
大怪v19 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_21 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript