关于该组件在Form中使用验证无效的问题

[songyazhao]

<template>
<div>
   <Button type="success" @click="handleValidate">handleValidate</Button>
   <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
      <FormItem label="地区" prop="area">
        <al-cascader v-model="formValidate.area" placeholder="请选择所在地区"/>
      </FormItem>
   </Form>
</div>  
</template>

<script>
export default {
  data() {
    const validateArea = (rule, value, callback) => {
      if (value.length === 0) {
        return callback(new Error("请选择地区"));
      } else {
        callback();
      }
    };

    return {
      formValidate: {
        area: []
      },
      ruleValidate: {
        area: [{ validator: validateArea, trigger: "change" }]
      }
    };
  },
  methods: {
    handleValidate() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          console.log("success");
        } else {
          console.warn("fail");
        }
      });
    }
  }
};
</script>

然后执行验证

this.$refs['formValidate'].validate((valid) => {})

结果如下：

是不支持在Form里面使用验证功能吗？

[qutz]

支持的，我用的al-selector

const validateAddress = (rule, value, callback) => {
            if (value.length < 2) {
                callback(new Error('选择省份和城市'));
            } else {
                callback();
            }
        };

Address: [{
                    required: true,
                    validator: validateAddress,
                    trigger: "blur"
                }]

[songyazhao]

@qutz
谢谢你O(∩_∩)O~，可以了
trigger里面需要加上blur

area: [{ validator: validateArea, trigger: "blur,change" }]`