鍍金池/ 問(wèn)答/HTML/ ivew表單驗(yàn)證失敗

ivew表單驗(yàn)證失敗

<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>

開(kāi)始驗(yàn)證時(shí)，第一個(gè)name不管填不填都會(huì)觸發(fā)錯(cuò)誤信息，第二個(gè)country選擇了值會(huì)觸發(fā)錯(cuò)誤信息，不太明白問(wèn)題出在哪里
圖片描述

回答
編輯回答
荒城

你好，我把你代碼貼出來(lái)運(yùn)行了，改了兩個(gè)地方就好了。
第一個(gè)：

<Form ref="formValue" :model="formValue" :rules="formRules" :label-width="80">

v-model="formValue" ->:model="formValue"
第二個(gè)
{ required: true, message: 'Please select the country', pattern: '/.+/', trigger: 'change' }->{ required: true, message: 'Please select the country', trigger: 'change' }
以下完整代碼

<template>
<div class="form abs-center">

<Form ref="formValue" :model="formValue" :rules="formRules" :label-width="80">
  <FormItem label="Name" prop="name">
    <Input v-model="formValue.name" placeholder="Enter your name" />
  </FormItem>
  <FormItem label="Country" prop="country">
    <Select v-model="formValue.country" placeholder="Select your country" prop="country" @on-change="change">
      <Option value="China">China</Option>
      <Option value="U.S.A.">U.S.A.</Option>
      <Option value="Janpan">Janpan</Option>
    </Select>
  </FormItem>
</Form>
</div>
</template>

<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>
2018年4月13日 22:47