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()
        }
    })
  • 相关阅读:
    3、总结
    三分及小例题
    约瑟夫问题的推导
    对于联通块的处理
    扩展欧几里得与二元不定方程
    js 阻止事件捕获
    原生xhr发送JSON
    $timeout
    Angularjs Ng_repeat中实现复选框选中并显示不同的样式
    为什么用Object.prototype.toString.call(obj)检测对象类型?
  • 原文地址:https://www.cnblogs.com/SamNicole1809/p/14016019.html
Copyright © 2011-2022 走看看