form 验证 validate validateField

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

<el-form :rules="dialogRules" size="small"  label-position="right" label-width="95px"  ref="dialogForm"  :model="dialogForm" >
 <el-form-item label="申请金额" prop="money">
   <el-col :span="16">
     <el-input v-model="dialogForm.money" :step="0.01" :min="0.01" @change="applyAmount" placeholder="请输入">
       <span slot="suffix" class="million">万元</span>
      </el-input>
     </el-col>
    <el-col :span="8">
        <el-button class="preview" type="primary" @click="previewFn(dialogForm.money)">预览大写金额</el-button>
     </el-col>
   </el-form-item>
   </el-form>

  // 最多到千亿，小数点最多保留两位
    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 的值；另外就是两个名字太像没看出来；最后一点也是的主要原因，想着这个是验证，所以才用的验证规则名。

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