element-ui的rules全局验证

忘是亡心i 2023-06-01 12:41 127阅读 0赞

原文：[https://www.jianshu.com/p/6a29e9e51b61][https_www.jianshu.com_p_6a29e9e51b61]

![1103120-20190927150312999-537552370.png][]

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
        }
      },

转载于:https://www.cnblogs.com/luoxuemei/p/11598081.html

[https_www.jianshu.com_p_6a29e9e51b61]: https://www.jianshu.com/p/6a29e9e51b61
[1103120-20190927150312999-537552370.png]: /images/20230601/01b6ebdca04646ecb2e29dbe4b013cbd.png