IVIEW Form 表单验证

下面的代码是简单的，不会报错，可以运行下，看看结果

<template>
  <Form :model="qwe" :rules="zxc">
    <FormItem prop="vvv">		<!-- 我用了 rules 中那个具体的属性 -->
      <Select v-model="qwe.vvv">		<!-- 有了要验证的属性，必有要有！ -->
        <Option value="beijing">New York</Option>
        <Option value="shenzhen">Sydney</Option>
      </Select>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data() {
    return {
      qwe: {
        city: "",
      },
      zxc: {
        vvv: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change",
          },
        ],
      },
    };
  },
};
</script>

下面三个

v-model = model + prop

qwe 和 zxc 的内容最好保持一致，这里不一致是为了更好的理解

---

下面的代码是平时正常使用的代码

<template>
  <Form :model="qwe" :rules="zxc" ref="asd">
    <FormItem label="City" prop="city">
      <Select v-model="qwe.city">
        <Option value="beijing">New York</Option>
        <Option value="shenzhen">Sydney</Option>
      </Select>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('asd')">Submit</Button>
      <Button @click="handleReset('asd')" style="margin-left: 8px"
        >Reset</Button
      >
    </FormItem>
  </Form>
</template>
<script>
export default {
  data() {
    return {
      qwe: {
        city: "",
      },
      zxc: {
        city: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success("提交成功咯，吼吼!");
        } else {
          this.$Message.error("提交失败了，请选择哈~!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>

正常情况下 modal 下的字段和 rule 下的字段 应该是对应的