Ant Design Vue表单校验失效问题

form表单添加校验失效

1.  核对文档版本与使用版本是否相同

2.  在 Ant Design Vue 中， 1.x 与 2.x以上版本form表单验证格式不同，根据自己使用的版本选择相应样式

3.  在2.x以上版本的表单验证中name属性是必须的，在1.x版本中prop属性是必须的

4. 1.x中使用 FormModel  (支持 v-model 检验)(版本：1.5.0+)表单代码

        prop属性对应rules中的字段名

<template>
  <a-form-model
    :model="form"
    :rules="rules"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
  >
    <a-form-model-item label="名称" prop="title">
      <a-input v-model="form.title" placeholder="请输入文字" />
    </a-form-model-item>
    <a-form-model-item label="顺序" prop="sort">
      <a-input v-model="form.sort" placeholder="请输入数字" />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
export default {
  data() {
    return {
      //表单
      form: {
        title: "",
        sort: "",
      },
      // 校验
      rules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 5, message: "最多不超过五个字", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入顺序", trigger: "blur" },
          {
            pattern: /^(0|[1-9][0-9]*)(\.\d+)?$/,
            message: "只允许输入正数",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

5. 2.x中from表单

        name属性对应rules中的字段名

<template>
  <a-form
    :model="form"
    :rules="rules"
    ref="ruleForm"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
  >
    <a-form-item label="名称" name="title">
      <a-input v-model="form.title" placeholder="请输入文字" />
    </a-form-model-item>
    <a-form-item label="顺序" name="sort">
      <a-input v-model="form.sort" placeholder="请输入数字" />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
export default {
  data() {
    return {
      //表单
      form: {
        title: "",
        sort: "",
      },
      // 校验
      rules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 5, message: "最多不超过五个字", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入顺序", trigger: "blur" },
          {
            pattern: /^(0|[1-9][0-9]*)(\.\d+)?$/,
            message: "只允许输入正数",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>