vue+element 常用表单rules规则封装

最新推荐文章于 2024-05-14 17:00:04 发布
最新推荐文章于 2024-05-14 17:00:04 发布
阅读量969 收藏 3
点赞数 2
分类专栏： 常用方法封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42484657/article/details/122322144
版权

vue.js javascript 前端

1:创建validate.js文件

2：完整代码


/**
 * Created by json on 21/11/15.
 */

/**
 * @param {string} path  判断字符串是否是https?:|mailto:|tal: 开头的
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

/**
 * @param {string} str  判断都是小写字母
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/;
  return reg.test(str);
}

/**
 * @param {string} str  判断都是大写字母
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/;
  return reg.test(str);
}

/**
 * @param {string} str  判断是否是字母
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(str);
}

/**
 * @param {string} str 判断是否字符串
 * @returns {Boolean}
 */
export function isString(str) {
  return typeof str === 'string' || str instanceof String;
}

/**
 * @param {Array} arg  判断是否是数组
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]';
  }
  return Array.isArray(arg);
}
/**
 * @param {string} value
 * @returns {Boolean}
 * 校验邮箱
 */
export function validateEMail(rule, value, callback) {
  const reg = /^(([^<>()[\]\\.,;:\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,}))$/;
  if (!value) {
    callback(new Error('邮箱不能为空'));
  } else {
    if (!reg.test(value)) {
      callback(new Error('请输入正确的邮箱'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 手机号
 */
export function validatePhone(rule, value, callback) {
  const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!value) {
    callback(new Error('手机号不能为空'));
  } else {
    if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 固定电话
 */
export function validateTelphone(rule, value, callback) {
  const reg = /0\d{2,3}-\d{7,8}/;
  if (!value) {
    callback(new Error('固定电话不能为空'));
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入正确的固定电话）'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 身份证
 */
export function validateIdNo(rule, value, callback) {
  const reg = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入正确的身份证号码'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 正整数
 */
export function validateInteger(rule, value, callback) {
  const reg = /^\+?[1-9]\d*$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入正整数'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 小写字母
 */
export function validateLowerCase(rule, value, callback) {
  const reg = /^[a-z]+$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入小写字母'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 大写字母
 */
export function validateUpperCase(rule, value, callback) {
  const reg = /^[A-Z]+$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入小写字母'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 数字字母下划线
 */
export function validateBaseData(rule, value, callback) {
  const reg = /^[a-zA-Z0-9_]{4,16}$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入数字字母下划线'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * url
 */
export function validateUrl(rule, value, callback) {
  const reg = /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-\(\)]*[\w@?^=%&/~+#-\(\)])?$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入合法地址'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 密码  （最少六位，包含一个大写字母，一个小写字母，一个数字，一个字符1）
 */
export function validatePass(rule, value, callback) {
  const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
  if (value === '' || value === undefined || value == null) {
    callback(new Error('请输入密码'));
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入8-16个数字、字母的组合'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 只能输入中文
 */
export function validateHan(rule, value, callback) {
  const reg = /^[\u4e00-\u9fa5·]{2,16}$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入中文'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * IPv4
 */
export function validateIPv4(rule, value, callback) {
  const reg = /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('不合法IPV4'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * IPv6
 */
export function validateIPv6(rule, value, callback) {
  const reg = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))|\[(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))](?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/i;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('不合法IPV6'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * MAC
 */
export function validateMAC(rule, value, callback) {
  const reg = /[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('不合法MAC'));
    } else {
      callback();
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 数字
 */
export function validatenum(rule, value, callback) {
  const reg = /^-?\d*\.?\d+$/;
  if (value === '' || value === undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入数字'));
    } else {
      callback();
    }
  }
}

3：使用方法

import { validateEMail, validatePass, validatePhone, validateTelphone } from '@/utils/validate';


 rules: {
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        email: [{ required: true, validator: validateEMail, trigger: 'blur' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        tel: [{ required: true, validator: validateTelphone, trigger: 'blur' }],
      }

前端辣白菜
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于elementUI封装了基础表单组件
梅花寺
10-13 1029
包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单详情按模块的方式展示并且可以收缩）
web18798225112的博客
02-21 3691
一、最终效果 二、组件集成了以下功能 1、可以多模块配置form表单——配置formOpts对象 2、每个模块可以收起或展开——模块不设置title值取消此功能 3、每个模块可以自定义插槽设置 4、头部标题可以显示隐藏——有title则显示没有则隐藏 5、可以自定义设置footer操作按钮（默认：表单显示取消和保存按钮；详情显示取消按钮）——设置 :footer="null" 6、多表单校验不通过可以指定哪个模块 7、可以设置tabs（默认展示第一个tab；可以指定展示某一个根据setSelectedTa
自定义集合类型校验
wangdaoyin2010的专栏
05-14 909
在对集合校验的时候，通过对集合中每一个对象记性校验来完成集合校验 1、自定义一个校验注解类 import javax.validation.Constraint; import javax.validation.Payload; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.l
vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示
最新发布
2401_84152317的博客
05-14 487
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
ElementUI-Form表单二次封装
Miketutu的博客
06-01 4626
ElementUI-Form表单二次封装
vue+element ui实现表单组件的封装
weixin_51140082的博客
04-01 316
效果图：主要是使用vue + elmentUi 的from的基础上进行封装使用改组件，是需要自定义从父组件传入一下字段表单字段${${然后先初始化表单字段的数据这些字段都是存在在一个新ts文件中，如果对象有值，根据不用的表单类型进行赋值回显，没有的话就是空。
vue+element自定义表单生成.rar
04-15
4. **表单验证**：Element UI提供了`el-form`组件和对应的验证规则，通过`rules`属性可以方便地进行表单验证。例如，我们可以设置必填项、长度限制、格式校验等规则，当用户提交表单时，如果不符合规则，表单会显示...
Vue+Element Form组件二次封装
07-19
Form组件通过model属性绑定数据，通过rules属性定义验证规则，通过submit事件处理表单提交，使得表单的创建和管理变得简单易行。 三、二次封装的必要性 虽然Element UI的Form组件已经相当强大，但在实际项目中，...
vue+element 模态框表格形式的可编辑表单实现
10-16
在示例代码中，`el-form`组件用于封装表单元素，它的`ref`属性可以让我们在Vue实例中通过`this.$refs.editForm`访问到这个表单，从而进行数据验证或提交操作。`:model`属性绑定了一个名为`editForm`的数据对象，表单...
vue+element实现表格新增、编辑、删除功能
10-16
在Vue.js框架中，结合Element UI库，我们可以轻松地实现表格的动态操作，如新增、编辑和删除。Element UI提供了一套美观且易用的组件，适用于开发Web应用的用户界面。以下是如何利用Vue和Element UI来实现这些功能的...
vue3form表单的二次封装
07-07
Vue3 Form 表单的二次封装是 Vue.js 开发中常见的一种优化实践，尤其是在使用 Element Plus UI 库时。这通常涉及到对 Element Plus 的 `el-form` 组件进行定制，以适应项目特定的需求，提高代码复用性，简化表单处理...
Vue后台管理系统练习-7 element表单的简单封装
Yuki_Aruki的博客
06-18 570
效果如下，后面table等内容可以看上一篇： 由于本项目中多处需要使用表单，在这里做一些简单的封装Element-ui中的el-form需要在el-form组件内绑定存入数据的对象，同时每个el-form-item组件有不同的种类，输入框，单选框，复选框等，因此要实现封装就需要判断每个属性的类型，内容大致如下： 这里只写了几个常用的，其余类型可以参见官方文档，其实都差不多几个需要说的点： 这里我通过prop接收的父组件数据是form，但是el-form绑定的这个对象是用来储存输入的数据，一定会需要动态修改的
基于elementUi封装的表单组件
山岗下的星空的博客
12-10 1809
前言：本文章是vue中因为公司的项目页面牵扯到大量的表单，从而诞生，组件的源代码我会放到文章最后，文章写的可能不好，但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率，有问题可以及时探讨QQ：1582340991 功能 提交校验，输入文本框校验，单个禁用，全局禁用，日期的区间选择，下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏，远程搜索框，插槽 使用示例小demo vue页面的配置 参数 释义 data 获取参数值 fields 动态配置表单js all-disable
vue+element 表单动态改变rules属性
qq_14971921的博客
10-06 8374
vue+element 表单动态改变rules属性(根据下拉列表的选项来动态触发校验) 当选择办公耗损（为1，字典生成）时，项目编号disabled (默认给请购单号); 当选择项目（为0，字典生成）时，项目编号要校验。 <el-col :span="12"> <el-form-item label="项目类型" prop="projectType"> <el-select v-model="form.projectType" placehold
封装VUE前端常用正则表达式
Lguorong的博客
06-02 675
前言：在我们做vue项目，日常开发的时候，肯定会经常遇到正则表达式，例如手机号，邮箱，密码和数字，每次验证都需要去查询，浪费时间不说，也造成代码冗余，我也遇到过，那我就自己封装一个吧，方便大家使用查询
element 表单校验 rules 自定义校验规则
ZeroChia的博客
04-06 2976
写云盘的创建文件夹功能时，需要在前段添加一个重名校验，由于前段UI用的是element，就研究了一下element自带的表单校验中自定义校验规则。 为表单新增一条rules: { required: true, message: '目录已存在', validator: this.checkExistName, trigger: 'blur' } checkExistName函数这么写： // 创建文件夹之前重名校验 checkExistName(rule, value, callback) { lis
vue + element 使用rules 完成 数字校验
zhentia的博客
02-22 2211
在 data() {} 添加自定义单元格验证规则 var checkCell = (rule, value, callback) => { const reg = /^[0-9]+.?[0-9]*$/; if (!value || reg.test(value)) { callback(); } else { callback(new Error("请输入数字")); } }; rules使用该方
vue&element-ui搭配使用rules表单校验规则
Hi~豆豆麻麻
01-15 6082
  验证手机号&amp;邮箱的写法 data() { var checkPhone = (rule, value, callback) =&gt; { const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/ if (!value) { return callback(new Error('手机号不...
vue+element UI rules校验
kongmeili的博客
01-24 1274
Form 表单校验时用到了rules，本文情况为input当值布尔值phoneFlag为true时 校验，否则不校验，代码如下： &lt;el-form-item label="手机号" prop="phoneNum" :rules="this.phoneFlag?rules.phoneNum:[{ required: false}]" &gt; &lt;el-input t...
帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件
03-24
好的，我可以为您提供代码示例，实现用 Vue Element-UI 封装一个带有分块、包含 el-form 的 el-tabs 组件。代码如下： ```vue <template> <div class="xs-tabs-form-container"> <el-tabs v-model="activeTab" style="height: 100%"> <el-tab-pane :label="pane.label" :key="index" v-for="(pane, index) in tabPanes"> <el-form :model="formData" :rules="formRules" ref="xsForm" label-width="100px"> <el-row :gutter="20" v-for="(element, rowIndex) in pane.elements" :key="rowIndex"> <el-col :span="12" v-for="(item, colIndex) in element" :key="colIndex"> <el-form-item :label="item.label" :prop="item.prop"> <template v-if="item.custom"> <slot :name="item.prop" :item="item"></slot> </template> <template v-else> <el-input v-model="formData[item.prop]"></el-input> </template> </el-form-item> </el-col> </el-row> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> export default { name: "XsTabsForm", props: { tabPanes: { type: Array, // [{label: 'Tab 1', elements: [[{label: 'Field 1', prop: 'field1'}]]}] required: true }, rules: { type: Object, // {field1: [{required: true, message: '不能为空', trigger: 'blur'}]} required: true } }, data() { return { activeTab: 0, formData: {} }; }, computed: { formRules() { const rules = {}; for (let key of Object.keys(this.formData)) { if (this.rules[key]) { rules[key] = this.rules[key]; } } return rules; } }, methods: { submitForm() { this.$refs['xsForm'].validate((valid) => { if (valid) { this.$emit('submit-form', this.formData); } else { this.$message.error('表单校验失败，请检查输入'); } }); } } }; </script> <style scoped> .xs-tabs-form-container { height: 100%; } </style> ``` 您可以通过 `tabPanes` 和 `rules` 两个参数传递组件中的标签页面和表单控制参数。每个标签页面可以包含多个行，每行包含多个表单项。可以选择使用默认的输入框，也可以通过 `item.custom` 参数自定义表单控件。您可以在 `submit-form` 事件中获取表单数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值