< template >
< div class= "form abs-center" >
<Form ref="formValue" v-model="formValue" :rules="formRules" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValue.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="Country" prop="country">
<Select v-model="formValue.country" placeholder="Select your country">
<Option value="China">China</Option>
<Option value="U.S.A.">U.S.A.</Option>
<Option value="Janpan">Janpan</Option>
</Select>
</FormItem>
</Form>
< script >
export default {
name: "Step1",
data () {
return {
formValue: {
name: "",
country: ""
},
formRules: {
name: [
{ required: true, message: "The name cannot be empty", trigger: "blur" }
],
country: [
{ required: true, message: "Please select the country", pattern: "/.+/", trigger: "change" }
]
}
}}
}
< / script >
when the verification starts, the first name triggers an error message regardless of whether it is filled in or not, and the second country selects a value that triggers the error message. It is not clear what the problem is
