vue+elementui 表单验证封装

最新推荐文章于 2022-08-18 10:42:23 发布
最新推荐文章于 2022-08-18 10:42:23 发布
阅读量442 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42882723/article/details/107490035
版权

el-form-item.js

function getPropByPath(obj, path, strict) {
  let tempObj = obj
  path = path.replace(/\[(\w+)\]/g, '.$1')
  path = path.replace(/^\./, '')

  let keyArr = path.split('.')
  let i = 0
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break
    let key = keyArr[i]
    if (key in tempObj) {
      tempObj = tempObj[key]
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!')
      }
      break
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
  }
}

export default {
  props: {
    verify: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    getRules() {
      const result = this.getVerifyRules() || []

      if (result.length) {
        return result
      }

      let formRules = this.form.rules
      let selfRules = this.rules
      let requiredRule = this.required !== undefined
        ? { required: !!this.required }
        : []
      formRules = formRules ? getPropByPath(formRules, this.prop ||
        '').o[this.prop || ''] : []

      return [].concat(selfRules || formRules || []).concat(requiredRule)
    },
    getVerifyRules() {
      if (!this.verify.length) {
        return null
      }

      const result = []

      let label = this.label

      if (label[label.length - 1] === ':' || label[label.length - 1] === '：') {
        label = label.slice(0, -1)
      }

      this.verify.forEach(val => {
        if (val.length === 0) {
          return
        }
        const rule = factory(val, label).ruleGenerator()

        rule && result.push(rule)
      }, this)

      return result
    }
  }
}


/**
 * NotNull // 不能为空
 * Number // 必须为数字
 * Int // 必须为整数
 * PositiveInt //正整数
 * DateTime=yyyy-MM-dd hh:mm:ss // 必须是日期时间，yyyy-mm-dd hh:mm:ss
 * Email // 必须是Email
 * ZipCode // 必须是邮政编码
 * CnTel // 必须是固定电话（010-55095236,0335-6229586）
 * CnPhone // 必须是手机号码（15011245852）
 * IDCardNo // 必须身份证号码
 * Length=3 // 长度等于3
 * Regex=\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} // 必须符合正则表达式
 * PositiveNumber  !/^\d+(\.\d{0,2})?$/   //必须非负的数字
 * TwoDecimalPlacesumber  !/^\d+(\.\d{0,2})?$/   //正数，且小数点后面最多两位
 * LetterNumber /^[a-zA-Z\d]+$/ 只能输入字母大小写和数字
 * BackCardNumber  /^([1-9]{1})(\d{14}|\d{18})$/ 请正确输入银行卡号
 * MaxDigit 判断任意字符最多多少位   写法MaxDigit89    最大89位
 * Chinese  // 必须中文
 * UniqueidCards   //判断重复的身份证
 * TwoDecimal  !/^0\.[1-9]{1,2}|0\.0[1-9]$/   // 折扣
 * */
class VerifyRule {
  constructor(label, message) {
    this.label = label
    this.message = message
  }

  ruleGenerator() {
    return null
  }
  validatorGeneratorIdcard(idCards, message) {

    return (rule, value, callback) => {
      if (!value || value === '') {
        callback()
        return
      } 
      const idCard = idCards?idCards:[];
      const isValid = idCard.some((item)=>{
          return value == item               
      })

      if (isValid) {
        callback(new Error(message))
      } else {
        callback()
      }  
    }
  }

  validatorGenerator(regex, message) {
    return (rule, value, callback) => {
      if (!value || value === '') {
        callback()
        return
      }

      const isValid = regex.test(value)

      if (!isValid) {
        callback(new Error(message))
      } else {
        callback()
      }
    }
  }
}

class NotNullRule extends VerifyRule {
  constructor(label, message) {
    message = message || '请输入' + label
    super(label, message)
  }

  ruleGenerator() {
    return {
      required: true,
      message: this.message,
      trigger: ['blur', 'change']
    }
  }
}

class RegexStaticRule extends VerifyRule {
  constructor(label, message, regExp) {
    super(label, message)
    this.regExp = regExp
  }

  ruleGenerator() {
    const validator = super.validatorGenerator(this.regExp, this.message)

    return {
      validator: validator,
      trigger: ['blur', 'change']
    }
  }
}
// 仅用于劳务稿酬提示身份证是否重复
class RegexStaticRuleIDCard extends VerifyRule {
  constructor(label, message, nuiIDCard) {
    super(label, message)
    this.nuiIDCard = nuiIDCard 
  }

  ruleGenerator() {
    const validator = super.validatorGeneratorIdcard(this.nuiIDCard,this.message);
    
    // const validator = (rule, value, callback) => { 
    //   if (window.filterUniqueidCards) {
    //     window.filterUniqueidCards.filter((item)=>{
    //       if(value == item){
            
    //         callback(this.message);
            
    //       }
    //     })
    //   }else {
    //     callback();
    //   }
    // };

    return {
      validator: validator,
      trigger: ['blur', 'change']
    }
  }
}

class RegexRule extends VerifyRule {
  constructor(label, message, exp) {
    super(label, message)
    this.exp = exp
  }

  ruleGenerator() {
    let regExp
    try {
      regExp = new RegExp(this.exp)
    } catch (e) {
      return null
    }

    const validator = super.validatorGenerator(regExp, this.message)

    return {
      validator: validator,
      trigger: ['blur', 'change']
    }
  }
}

class LengthRule extends VerifyRule {
  constructor(label, message, size) {
    super(label, message)
    this.min = size.min
    this.max = size.max
  }

  ruleGenerator() {
    return {
      min: this.min,
      max: this.max,
      message: this.message,
      trigger: ['blur', 'change']
    }
  }
}

class DateTimeRule extends VerifyRule {
  constructor(label, message, dateFormat) {
    super(label, message)
    this.dateFormat = dateFormat
  }

  ruleGenerator() {
    let regExp
    let exp = '^' + this.dateFormat + '$'

    exp = exp.replace('yyyy', '[0-9]{4}')
    exp = exp.replace('yy', '[0-9]{2}')
    exp = exp.replace('MM', '[0-9]{2}')
    exp = exp.replace('dd', '[0-9]{2}')
    exp = exp.replace('hh', '[0-9]{2}')
    exp = exp.replace('mm', '[0-9]{2}')
    exp = exp.replace('ss', '[0-9]{2}')

    try {
      regExp = new RegExp(exp)
    } catch (e) {
      return null
    }

    const validator = super.validatorGenerator(regExp, this.message)

    return {
      validator: validator,
      trigger: ['blur', 'change']
    }
  }
}

function parseParam(param) {
  let result = {
    value: '',
    message: null
  }

  if (param.indexOf('|') === -1) {
    result.value = param
    return result
  }

  const array = param.split('|')

  result.value = array[0]
  result.message = array[1]

  return result
}

function parseRegexParam(param) {
  let result = {
    value: '',
    message: null
  }

  if (param.indexOf('$|') === -1) {
    result.value = param
    return result
  }

  const array = param.split('$|')

  result.value = array[0] + '$'
  result.message = array[1]

  return result
}

function factory(type, label) {
  let param

  if (type.startsWith('NotNull')) {
    param = parseParam(type)
    return new NotNullRule(label, param.message)
  }

  if (type.startsWith('Number')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '必须是数字', /(^-?\d+\.?\d+$)|(^-?\d+$)/)
  }

  if (type.startsWith('Int')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '必须是整数', new RegExp('^-?\\d+$'))
  }

  if (type.startsWith('PositiveInt')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '必须是正整数', /^[1-9]\d*$/)
  }

  if (type.startsWith('Chinese')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '必须是汉字', /^[\u4e00-\u9fa5]*$/)
  }

  if (type.startsWith('Email')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||  '请输入正确格式的email',
      /^([-a-zA-Z0-9_.])+@(([-a-zA-Z0-9])+\.)+([a-zA-Z0-9]{2,4})+$/)
  }

  if (type.startsWith('ZipCode')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||   '请输入正确的邮政编码', /^[1-9][0-9]{5}$/)
  }

  if (type.startsWith('CnTel')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||  '请输入正确的固定电话',
      /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/)
  }

  if (type.startsWith('PositiveNumber')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '为非负的正数',/^[0-9]+$/)
  }

  if (type.startsWith('TwoDecimalPlacesumber')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||  '最多千万级大于0的数字,保留两位小数',
    /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/) 
  }

  if (type.startsWith('numberlacesumber')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||  '千万级以内的数字',
    /^-?[0-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/) 
  }
  
  if (type.startsWith('UniqueidCards')) {
    param = parseParam(type) 
    return new RegexStaticRuleIDCard(label, param.message ||  '当前身份证号与其他的重复',window.filterUniqueidCards)
  }

  if (type.startsWith('UniqueinvoiceNos')) {
    param = parseParam(type) 
    return new RegexStaticRuleIDCard(label, param.message ||  '当前发票号码与其他的重复',window.filterUniqueinvoiceNos)
  }

  if (type.startsWith('UniqueUserNos')) {
    param = parseParam(type) 
    return new RegexStaticRuleIDCard(label, param.message ||  '当前领款人与其他的重复',window.filterUniqueinvoiceNos)
  }

  if (type.startsWith('MaxNumberNegativeLength11')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||  '最多千万级数字,保留两位小数',
    /^[-]{0,1}[1-9]\d{0,7}(\.\d{1,2})?$|^[-]{0,1}0(\.\d{1,2})?$/)
  }

  if (type.startsWith('MaxDigit')) {
    const ltParams = type.split('MaxDigit')
    param = parseParam(ltParams[1])
    let myReg = new RegExp(`^[0-9\u4e00-\u9fffa-zA-Z.]{1,${ltParams[1]}}$`)
    return new RegexStaticRule(label, param.message || label + `最多${ltParams[1]}位`,myReg)
  }


  if (type.startsWith('LetterNumber')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '只能输入大小字母和数字',
    /^[a-zA-Z\d]+$/)
  }

  if (type.startsWith('BackCardNumber')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || '请输入正确的',
    /^([1-9]{1})(\d{14}|\d{18})$/)
  }

  if (type.startsWith('MaxNumberLength40')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '最多40位',
    /^.{0,40}$/)
  }
  if (type.startsWith('MaxNumberLength30')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '最多30位',
    /^.{0,30}$/)
  }
  if (type.startsWith('MaxNumberLength10')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '最多10位',
    /^.{0,10}$/)
  }
  if (type.startsWith('MaxNumberLength15')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || label + '最多15位',
    /^.{0,15}$/)
  }

  if (type.startsWith('CnPhone')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message || '请输入正确手机号码', /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/)
  }

  if (type.startsWith('IDCardNo')) {
    param = parseParam(type)
    return new RegexStaticRule(label, param.message ||    '请输入正确身份证号码', /(^\d{15}$)|(^\d{17}([0-9]|X)$)/)
  }

  if (type.startsWith('Regex=')) {
    const exp = type.split('=')
    param = parseRegexParam(exp[1])
    return new RegexRule(label, param.message || label + '必须符合正则表达式', param.value)
  }

  if (type.startsWith('Length=')) {
    const eqParams = type.split('=')
    param = parseParam(eqParams[1])
    return new LengthRule(label, param.message || label + '长度必须等于' + param.value, {
      min: parseInt(param.value),
      max: parseInt(param.value)
    })
  }

  if (type.startsWith('Length>')) {
    const gtParams = type.split('>')
    param = parseParam(gtParams[1])
    return new LengthRule(label, param.message || label + '长度必须大于' + param.value, {
      min: parseInt(param.value) + 1,
      max: null
    })
  }

  if (type.startsWith('Length<')) {
    const ltParams = type.split('<')
    param = parseParam(ltParams[1])
    let myReg = new RegExp(`^(.|\r|\n|\s){1,${ltParams[1]}}$`) 
    return new RegexStaticRule(label, param.message || label + `最多${ltParams[1]}位`,myReg)
  }

  if (type.startsWith('DateTime=')) {
    const dateFormat = type.split('=')
    param = parseParam(dateFormat[1])
    return new DateTimeRule(label, param.message || label + '必须是日期时间，' +
      param.value, param.value)
  }

  if (type.startsWith('TwoDecimal')) {
    param = parseParam(type)   
    return new RegexStaticRule(label, param.message || label + '取值在0-1中间,最多2位小数', /(^[0-1]{1}([.]([0-9]){1,2})?$)/)
  }

  return null
}

index.js

import ElFormItemMixin from './el-form-item.js'

const mixins = {
  install: Vue => {
    // 对 el-form-item 验证增强
    Vue.component('ElFormItem').mixin(ElFormItemMixin)
  }
}

// 导出组件
export default mixins

main.js

import MixinELEMENT from './mixins/index.js'
Vue.use(MixinELEMENT)

目录结构
在这里插入图片描述

爱吃瓜子的小松鼠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于element ui 的二次简单表格封装
09-10
基于element ui 的二次简单表格封装
vue elementui form表单验证的实现
01-19
1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 ...
Vue+elementui实现表单验证
weixin_45446406的博客
08-10 1451
这里希望读者去阅读一下elementui手册中关于表单组件这一部分添加链接描述 elementui中有封装好的方法去实现表单验证 1.在el-form中添加rules验证，在el-form-item中添加prop，这里一定一定要注意prop的值必须要和v-model绑定值相同，实例代码如下 2.接下来在data中添加表单验证规则 这里required是必填的意思，那么就会有人问，如果我想自定义...
Element UI表单校验封装
奋斗到天明~
11-08 1036
```java ```javascript > <font color="red">这几天在搞一个后台管理项目，里面用到了表单验证，想到能偷懒，所以就封装了一个表单验证插件，需要的直接使用就好！！！</font> ## 一、新建validator.js文件 ```javascript // 数字 const numberReg = /^\d+$|^\d+[.]?\d+$/ // 中文 const cnReg = /^[\u4e00-\u9fa5]+$/ // 邮箱 c.
element 可编辑表格校验封装
Rrui777的博客
08-18 368
基于element 可编辑表格校验封装
element表单验证的封装
qyp_1的博客
10-09 976
前言 这一篇文章是在用element中的表单的时候，会用到正则来判断表单的对错，当然正则的话得自己写，比如这样 但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性，这还只是两个，一般的话不止两个，会有很多，会产生很多的重复的正则，那么，就很烦，因为我们是要追求优雅，简介的，诶，碰到我了，那么就很简单的解决了。 1、创建一个js文件 创建一个js文件，我是习惯性创建到assets中，这个没有什么规定的，然后就在里面写正则，就是按这样的来，因为我们是用的人家element的东西，所以得规规
精简系统登录页模板html+vue+elementui
09-17
3. **element-ui** - 这可能是一个包含Element UI库的文件夹，包括各种预定义的组件如按钮、输入框、表单验证等，这些都可能被用于构建登录页面。 4. **svg** - 这个文件夹可能包含了SVG（可缩放矢量图形）图像，常...
vue+elementUi图片上传组件使用详解
12-01
这个组件还考虑到了ElementUI的表单验证，当图片上传完成后，会通过`$emit`触发一个`clearValidate`事件，通知父组件清除相关的验证状态，以避免显示错误提示。 总的来说，`upload.vue`组件通过与ElementUI的结合，...
vue+Element-UI 前端框架
02-15
在这个"vue+Element-UI"项目中，开发者利用Vue.js的强大功能和Element-UI的便捷组件，实现了右键功能、动态栏目、HTTP请求的封装以及表单验证等实用功能，提升了项目的开发效率和用户体验。同时，通过状态管理，确保...
vue+element实现表格新增、编辑、删除功能
10-16
这些规则在提交表单时可以使用`this.$refs.form.validate()`进行验证。 总的来说，Vue+Element UI的组合使得实现表格的动态操作变得简单直观。通过结合Vue的数据绑定和响应式特性，以及Element UI提供的组件，我们...
vue+elementUI正则验证封装
余白x的博客
02-18 1088
正则表达式封装 validator.js export default { /** * 数字验证 */ isNumber(rule, value, callback) { if (!value) { //当使用时没有定义text则非空验证默认提示请输入 callback(new Error(rule.text ? rule.text : '请输入')); } else { // cons
vue+elementui项目封装form表单公共正则验证
名人卷耶
09-25 1030
前期准备：在项目下创建一个工具包文件夹util，文件夹下创建一个formValidation.js文件 1、formValidation.js 文件 let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码 let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名 let FormValidate = (function() { function FormValidate() {} FormValidate.F.
vue+element表单校验封装
coder__wang的博客
11-08 1911
vue+elementui技术栈的小伙伴们，在平时项目里，特别是OA项目，会大量用到表单以及表单校验。经常会处理一些必填项，对它们是否有值的判断显得有些繁琐和臃肿，本文将封装方法，解决该问题。 最近业务中频繁增加必填项，之前的常规做法就是在提交、修改或者其他操作之前，判断必填项是否填写，做个拦截： 在每一个操作之前加上这些必填项的验证，如果有少量的必填项，可以这样处理，但是有大量必填项的时候，代码就会显得非常冗余。 现在尝试将抽出来形成方法，在提交、修改等操作之前调用该方法，.
vue -element ui 自定义验证规则，封装在公共的文件里
杨振洲的博客
07-08 1463
1.首先 新建一个rules.js 的文件 编写校验规则 我新建在api 文件下。 // 账号 let codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/ // 电话 let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ // 必须为数字 let numberReg = /^\d+$|^\d+[.]?\d+$/ // 密码 let passwordReg = /^(?![\d]+$)(?![a-zA-Z
Vue项目里面 表单的正则验证和表单验证(两种验证方式)
m0_57262819的博客
05-20 993
{validator: 函数名 ,trigger: 'blur'} 这个和之前的函数定义不一样 ,但是data里面也可以定义函数 const samePwd = 一个函数 其实很值钱没什么区别
vue+element 常用表单rules规则封装
菜鸡进阶之路
01-05 954
vue+element+form表单校验封装
ElementUI框架表单验证的封装
weixin_58087364的博客
05-19 767
文章介绍用的是el-form-valid-item组件，组件是基于Element框架的表单验证的封装，让我们的验证的规则有更高的可复用性，可适用于VUE2+ElementUI和VUE3+ElementPlus
js开发 常用工具函数
qq_39387402的博客
08-23 226
@TOC 版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_35017350/article/details/94406477 1、isStatic：检测数据是不是除了symbol外的原始数据 function isStatic(value) { ret...
element ui utils getValueByPath & getPropByPath
weixin_36878452的博客
03-31 899
/** * * @param {*} object { aaa: { bbb: { ccc: 123 } } } * @param {*} prop "aaa.bbb.ccc" */ export const getValueByPath = function(object, prop) { prop = prop || ''; const paths = prop.split...
Vue+ElementUI前端开发手册
最新发布
10-12
Vue+ElementUI前端开发手册是一份详尽的指南，专为初级和中级前端开发者设计，旨在帮助他们快速上手Vue框架和ElementUI组件库的集成开发。这份文档不仅适用于前端开发人员进行项目搭建和界面设计，同时也可供后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值