There is a requirement that the form needs to upload files is a required item, and the rulesverification can be successful by adding form verification.
data data:
ruleForm: {
receiveMoney: '',
fileList: []
},
check:
rules: {
receiveMoney: [
{
required: true, message: '请输入金额', trigger: 'blur' },
{
pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/, message: '请输入数字，至多保留两位小数', trigger:'blur' }
],
fileList: [
{
required: true, message: '请上传凭证', trigger: 'change' }
]
},
Validate the form on submit:
submitForm(){
this.$refs.ruleForm.validate((val)=>{
if(val){
// 校验通过
}
})
}
At this time, when the file is not uploaded, click Submit to initiate the form verification this.$refs.ruleForm.validateto see the verification prompt
However, when there is a verification prompt message, the prompt message does not disappear after uploading the file like other form verifications. I tried a custom verification and validatorfound that the custom verification was not triggered after uploading the file.validator
Solution: Through Vue's watchmonitoring, when there is an uploaded file, clear the uploaded verification this.$refs['ruleForm'].clearValidate(['fileList']), which is the name of fileListthe form verificationprop
code:
watch: {
'ruleForm.fileList': {
handler (newVal) {
if(newVal.length){
this.$refs['ruleForm'].clearValidate(['fileList'])
}
},
deep: true
}
},
Effect: When there is a verification prompt message, the prompt message disappears after uploading the file
[Reference article] https://juejin.cn/post/6844903779926556686
other answers
I didn't edit the echo operation here, and I didn't look at other methods after the effect was realized. The method implemented by the friends in the comment area: use the method
in the window when the pop-up wakes up , and there is no need to monitor the operation in the future$nextTickclearValidate
this.$nextTick(() => {
this.$refs['ruleForm'].clearValidate()})