Vue.js 中如何校验免税收入表单项 (taxExemptIncome)
<template>
<el-form :model='form' ref='form' label-width='120px'>
<el-form-item label='免税收入:' prop='taxExemptIncome'>
<el-input
v-model='form.taxExemptIncome'
placeholder='请输入免税收入'
:disabled='isEditing'
clearable
/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
taxExemptIncome: ''
},
isEditing: false
};
},
methods: {
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单校验通过
// 可以在这里进行其他操作
} else {
// 表单校验不通过
}
});
}
}
};
</script>
<p>在上面的代码中,<code>taxExemptIncome</code> 是一个表单项的属性,可以通过 <code>v-model</code> 双向绑定到 <code>form.taxExemptIncome</code> 属性上。</p>
<p>要进行校验,可以使用 <code>this.$refs.form.validate</code> 方法,它会触发表单校验,并且在回调函数中返回校验结果。校验结果 <code>valid</code> 为 <code>true</code> 表示校验通过,为 <code>false</code> 表示校验不通过。根据校验结果,可以进行相应的操作。</p>
<p>另外,<code>isEditing</code> 是一个布尔值,用于控制输入框是否可编辑。如果设置为 <code>true</code>,则输入框将被禁用。</p>
原文地址: https://www.cveoy.top/t/topic/pk8Q 著作权归作者所有。请勿转载和采集!