zoukankan      html  css  js  c++  java
  • vue element-ui rules 封装

    新建validator.js,内容如下,参考补充:

    const valid = {
      REG_PHONE: /^[1]([3-9])[0-9]{9}$/,
      checkNull(rule, value, callback, message, flag = true) {
        if (isNullOrEmpty(value)) {
          callback(new Error(message))
        }
        if (flag) {
          callback()
        }
      },
      checkSelect(rule, value, callback, message, flag = true) {
        if (isNullOrEmpty(value)) {
          callback(new Error(message))
        }
        if (flag) {
          callback()
        }
      },
      checkMultiSelect(rule, value, callback, message, flag = true) {
        if (isEmpty(value)) {
          callback(new Error(message))
        }
        if (flag) {
          callback()
        }
      },
      checkByRegex(rule, value, callback, regex, message, flag = true) {
        if (!regex.test(value)) {
          callback(new Error(message))
        }
        if (flag) {
          callback()
        }
      }
    }
    
    function isEmpty(value) {
      return value.length === 0
    }
    
    function isNullOrEmpty(value) {
      if (!value) {
        return true
      }
      return value.trim() === ''
    }
    
    export default valid

    使用方式:

    注:如果有多个判断,除最后一条判断外,之前的判断,flag参数应为false

    import valid from '@/utils/validator'
    rules: {
      loginForm: {
        phone: [
          {
            required: true, trigger: 'blur',
            validator: (rule, value, callback) => {
              valid.checkNull(rule, value, callback, '请输入手机号', false)
              valid.checkByRegex(rule, value, callback, valid.REG_PHONE, '手机号不合法')
            }
          }
        ]
      }
    }

    虽然参数多了一些,但是复用性和灵活性得到改进。

    方法,正则,消息都可以统一管理,这种好处不必多说。

    rules的使用方式不变,在form中引用即可。

    另外,补充下,在某些情况下可能需要对form中的某个字段进行验证,可以使用如下方法:

    this.$refs.form.validateField('phone', (v) => {
        if (v) {
          return false
        } else {
          doSomething()
        }
    })
  • 相关阅读:
    codeforces 459 B.Pashmak and Flowers 解题报告
    poj 1789 Truck History 解题报告
    poj 1258 Agri-Net 解题报告
    poj 1860 Currency Exchange 解题报告
    poj 1094 Sorting It All Out 解题报告
    poj 3368 Frequent values 解题报告
    hdu 1548 A strange lift 解题报告
    BestCoder4 1002 Miaomiao's Geometry (hdu 4932) 解题报告
    hdu 1400 Mondriaan's Dream 解题报告
    打电话主要代码(意图用法)
  • 原文地址:https://www.cnblogs.com/SamNicole1809/p/14016019.html
Copyright © 2011-2022 走看看