element-ui的rules全局驗證

原文：https://www.jianshu.com/p/6a29e9e51b61

 

 

 

rules.js 

var QQV = (rule, value, callback) => {
  debugger
  if (value === '') {
    callback(new Error('輸入QQ號'))
  } else if (/^[1-9][0-9]{4,10}$/.test(value)) {
    callback()
  } else {
    callback(new Error('輸入正確的QQ號'))
  }
}

// 類似金錢,首位不為0,最多2位小數
export function checkNumPot2(rule, value, callback) {
  const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
  if (!value) {
    return callback(new Error('請填寫數字'))
  } else if (!reg.test(value)) {
    return callback(new Error('請填寫數字,最多2位小數'))
  } else {
    callback()
  }
}

// 身份證
export function checkIdNum(rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    return callback(new Error('證件號碼不能為空'))
  } else if (!reg.test(value)) {
    return callback(new Error('證件號碼不正確'))
  } else {
    callback()
  }
}

// 整數
export function checkInterNum(rule, value, callback) {
  const reg = /^[0-9]*[1-9][0-9]*$/
  if (!value) {
    return callback(new Error('請填寫整數'))
  } else if (!reg.test(value)) {
    return callback(new Error('請輸入整數'))
  } else {
    callback()
  }
}

export default {
  QQ: [{ required: true, validator: QQV, trigger: 'blur' }],
  phone: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼', trigger: 'blur' }],
  numPot2: [{ required: true, validator: checkNumPot2, trigger: 'blur' }],
  InterNum: [{ required: true, validator: checkInterNum, trigger: 'blur' }]
}

　　

config.vue頁面使用

<template>
  <el-form :model="query" ref="form" label-position="right" v-loading="loading">
      <el-form-item prop="rate" :rules="rules.numPot2" >
         <el-input-number v-model="query.rate" size="medium"></el-input-number>
      </el-form-item>
  </el-form>
</template>
import rules from '@/utils/rules'
data() {
      rules
    }
  },