Vue clear Form form validation information Clear form validation last prompt information

Problem Description

In the Vue project, the Form component is used for form verification. When the form is opened again, the last verification prompt information still exists. The business scenario requires that the verification prompt information and bound data be cleared when the form is opened again.

Solution

Add the following code to the method of displaying and hiding the control form:

1. Use the Form component in Iview: Clear the validation prompt information and field values ​​of the form

resetFields()Method: Reset the entire form, reset all field values ​​to empty and remove the validation results.

//form指的是绑定到Form组件上的属性ref
this.$nextTick(()=>{
    
    
    this.$refs.form.resetFields();
})

There is no method provided in the Iview component library clearValidate(), not to be confused with Element Ui.

2. Use the Form component in Element Ui

2.1 Only clear the form validation prompt information, not the field value

clearValidate()Method: Remove the verification result of the form item. Pass in the prop attribute of the form item to be removed or an array of props. If not passed, the verification result of the entire form will be removed.

//1.清除所有表单项的验证提示信息
this.$nextTick(()=>{
    
    
    this.$refs.form.clearValidate();
})
//2.清除某一表单项的验证提示信息，如手机号
this.$nextTick(()=>{
    
    
    this.$refs.form.clearValidate(['phone']);
})

Note: clearValidate()When using the method to clear the prompt information of a certain form item, pay attention to the installed Element Ui version: Element Ui^2.4.3 and later versions only support incoming parameters.

2.2 Clear form validation prompts and field values

resetFields()Method: Reset the entire form, reset all field values ​​to their initial values ​​and remove the validation results.

this.$nextTick(()=>{
    
    
    this.$refs.form.resetFields();
})

Notice

The field that wants to clear the information must add the prop attribute.
prop: corresponds to the field in the form field model

    <FormItem label="Name" prop="name">
        <Input v-model="formValidate.name" placeholder="输入您的姓名"></Input>
    </FormItem>

If it is helpful to you, please remember to click triple link