美文网首页
element-ui的rules全局验证

element-ui的rules全局验证

作者: 前端阿峰 | 来源:发表于2020-07-20 16:07 被阅读0次

    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' }]
    }
    

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

    相关文章

      网友评论

          本文标题:element-ui的rules全局验证

          本文链接:https://www.haomeiwen.com/subject/crrykktx.html