混入裡面加入

importvalidatorfrom'@/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自己封裝的元件 　

importvalidatorfrom'@/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
  }
}