element form表单生成验证信息

混入里面加入


import validator from '@/utils/el-validator'  
// 生成验证信息表单信息
    rulesFn(data) {
      const rules = {}
      data.forEach(element => {
        if (element.required) {
          rules[element.prop] = []
          const rulesList = { required: true, message: `${element.label}不能为空`, trigger: 'blur' }
          if (element.type === 'input') {
            rulesList.trigger = 'blur'
          }
          if (element.type === 'select' || element.type === 'selectCode' || element.type === 'radio') {
            rulesList.trigger = 'change'
          }
          rules[element.prop].push(rulesList)
          // 加入正则效验
          if (element.regexp) {
            rules[element.prop].push(
              {
                required: 'true',
                message: `请输入正确的${element.label}`,
                trigger: 'blur',
                validator: validator,
                regexp: element.regexp
              }
            )
          }
        }
      })
      return rules
    }

循环表格数据
使用数据加入验证

export const ReviewDatas = [
  {
    label: '电话',
    prop: 'aab015',
    required: true,      //是否必填
    regexp: 'phoneAndTel',  // 如果需要正则则加入对应的正则类型
    type: 'input'
  }
]

页面中需要添加

<FormItems ref="ref" :rules="rulesFn(ReviewDatas)" :model="ReviewForm" :items-datas="ReviewDatas" :form-datas="ReviewForm" :is-grid="false" />

 FormItems 是通过element自己封装的组件  

import validator from '@/utils/el-validator'  内容

export default function validator(rule, value, callback) {
  if (!value && !rule.required) {
    callback()
  }
  if (regexping(rule.regexp, value)) {
    callback()
  } else {
    return callback(new Error(errText))
  }
}
var errText = ''

function regexping(regexp, value) {
  if (regexp) {
    let reg
    if (regexp === 'cn') { // 中文
      reg = /^[\u0391-\uFFE5]+$/
      errText = '仅允许中文汉字'
    } else if (regexp === 'en') { // 英文字母
      reg = /^[a-zA-Z]+$/
      errText = '仅允许英文字母'
    } else if (regexp === 'passOne') { // 英文或数字 最多20位
      reg = /^[a-zA-Z]|[0-9]{6,20}$/
      errText = '仅允许英文或数字'
    } else if (regexp === 'En+Number') { // 任意英文+数字
      reg = /^[a-zA-Z0-9]+$/
      errText = '仅允许英文及数字'
    } else if (regexp === 'decimal') { // 小数浮点数类型
      reg = /^\d+(\.\d+)?$/
      errText = '必须是小数'
    } else if (regexp === 'integer') { // 整数类型 - 正负都可以
      reg = /^-?[1-9]\d+$/
      errText = '必须是整数'
    } else if (regexp === '+integer') { // 整数类型 - 正数
      reg = /^[0-9]*[1-9][0-9]*$/
      errText = '必须是正整数'
    } else if (regexp === '0+integer') { // 0+正数
      reg = /^(0|\+?[1-9][0-9]*)$/
      errText = '必须是大于等于0的整数'
    } else if (regexp === 'number') { // 数字类型
      reg = /^-?[0-9]\d+$/
      errText = '必须是数字'
    } else if (regexp === 'email') { // 邮箱
      reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      errText = '邮箱格式错误'
    } else if (regexp === 'phone') { // 手机 18165221849
      reg = /^1\d{10}$/
      errText = '请输入正确的手机号'
    } else if (regexp === 'tel') { // 电话 0731-5632575
      reg = /^0\d{2,3}-?\d{7,8}$/
      errText = '必须是电话号码'
    } else if (regexp === 'phoneAndTel') { // 手机+电话
      reg = /^1\d{10}$|^0\d{2,3}-?\d{7,8}$/
      errText = '必须是手机或电话号码'
    } else if (regexp === 'postcode') { // 邮政编码
      reg = /^\d{6}$/
      errText = '请输入正确的邮编'
    } else if (regexp === 'http') { // http (支持 - :post,www,ip,http,https)
      reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
      errText = '必须是正确url地址'
    } else if (regexp === 'ip') { // ip地址
      reg = /(\d+)\.(\d+)\.(\d+)\.(\d+)/
      errText = '必须是正确ip格式'
    } else if (regexp === 'identityCard') { // 身份证
      reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      errText = '必须是正确身份证'
    } else if (regexp === '+num2') { // 保留两位小数
      reg = /^\+?(\d*\.\d{2})$/
      errText = '正数,保留两位小数'
    } else if (regexp === 'amt') { // //验证是,数字或 ,者两位小数,或者一位小数,整数
      reg = /^\d+(\.\d{1,2})?$/
      errText = '请输入正确的金额格式'
    } else if (regexp === 'socailcode') { // 验证:社会统一代码(18位英文或者数字)
      reg = /^[a-zA-Z0-9]{18}$/
      errText = '必须是18位数字或者英文'
    } else if (regexp === 'otherCertificates') { // 验证:其它证件号码(小于等于18位进行校验,且只允许数字、字母、-、文中空格这4类字符)
      reg = /^[a-zA-Z0-9- ]{1,18}$/
      errText = '必须是数字、字母、- 文中空格组成'
    } else if (regexp === 'bankcard') { // 验证:银行卡简单验证
      reg = /^([1-9]{1})(\d{14}|\d{18})$/
      errText = '请输入正确输入银行卡号'
    } else if (regexp === 'password') {
      reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}$/
      errText = '请输入6位以上密码,并且包含数字、字母和特殊符号'
    } else if (regexp === 'socialCode') {
      reg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
      errText = '请输入正确的统一社会信用代码'
    } else if (regexp === 'TelPhone') {
      reg = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/
      errText = '请输入正确的座机号码'
    } else if (regexp === 'Certificates') { // 身份证+其他证件
      reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)|^[a-zA-Z0-9- ]{1,18}$/
      errText = '请输入正确的证件号码'
    }
    if (value && reg.test(value)) { // item 验证不通过
      return true
    } else {
      return false
    }
  } else {
    return true
  }
}

 

posted @ 2020-11-20 17:39  laowang666888  阅读(257)  评论(0编辑  收藏  举报