使用element-ui的form表单validateField部分校验问题
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="验证码" prop="code">
<el-input v-model="form.code" placeholder="请输入验证码" maxlength="6"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
code: ''
},
rules: {
code: [{
required: true,
message: '请输入邀请码',
trigger: 'blue',
type: 'number' //当type字段存在时,validateField永远都会返回message的值,去掉type则不会
}, ],
}
};
},
methods: {
submitForm(formName) {
this.$refs.ruleForm.validateField('code',(valid) => {
console.log(`${valid}***************************`);
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>