今天收到一个需求在输入框中展示在弹窗选中的数据,输入框只做展示
直接上代码
<template>
<Form ref="form" :model="formData" :rules="rules">
<FormItem prop="readOnlyInput">
<Input v-model="formData.readOnlyInput" readonly >
<template #append>
<span @click="open('1')">+</span>
</template>
</Input>
</FormItem>
<Button @click="submitForm">提交</Button>
</Form>
</template>
<script>
export default {
components:{
PhoneModal
},
data() {
return {
formData: {
readOnlyInput: ''
},
rules: {
readOnlyInput: [
{ required: true, message: '此输入框为必填项', trigger: 'blur' },
{ validator: this.validateReadOnlyInput, trigger: 'blur' }
]
},
showModal:false,
dataType:'',
selecTabletData:[],
};
},
methods: {
validateReadOnlyInput(rule, value, callback) {
if (this.formData.readOnlyInput === '') {
callback(new Error('输入框为只读且必填,请联系管理员'));
} else {
callback();
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 提交表单
} else {
// 表单验证失败
}
});
}
},
};
</script>
这时验证会出现设置的trigger不触发,不能自动校验,验证不刷新
在提交后手动清除校验
this.$refs.formData.clearValidate()
移除校验结果并重置字段值
this.$refs["formData"].resetFields();