使用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 的值；另外就是两个名字太像没看出来；最后一点也是的主要原因，想着这个是验证，所以才用的验证规则名。
这个方法适用场景，比如 需要给手机发送验证码， 必须得先验证手机号的有效性才能发送。
