form 验证 validate validateField

使用vue+element 项目中使用validateField
对部分表单字段进行校验的方法 Function(prop: string, callback: Function(errorMessage: string))

 
   
     
       万元
      
     
    
        预览大写金额
     
   
   

  // 最多到千亿，小数点最多保留两位
    let checkNumber = (rule, value, callback) => {
      const reg = /^(0|[1-9][\d]*)\.{0,1}\d{0,2}$/
      if (!value) {
        return callback(new Error('请输入申请金额'))
      } else if (!reg.test(value) || value <= 0) {
        return callback(new Error('请输入正确的金额'))
      } else if (value >= 100000000) {
        return callback(new Error('请输入正确的金额'))
      } else {
        callback()
      }
    }

// 预览
    previewFn(val) {
    //当 验证money 通过验证时，在进行大写转换，否则不做处理
      this.$refs['dialogForm'].validateField('money', moneyError => {
        if (!moneyError) {
         // do something
        }
      })
    },

开发过程中遇到问题

[Vue warn]: Error in v-on handler:
 "TypeError: Cannot read property 'validateField' of undefined"

报错，因为 this.$refs['dialogForm'].validateField 这句 写成 this.$refs['dialogRules'].validateField ， 因为找不到$ref['dialogRules'] 元素 报错，$refs相当于一个选择器 ，选择标签上ref 的值；另外就是两个名字太像没看出来；最后一点也是的主要原因，想着这个是验证，所以才用的验证规则名。

这个方法适用场景，比如 需要给手机发送验证码， 必须得先验证手机号的有效性才能发送。