vue中iview组件实现表单数据的动态校验

1.实现效果

2.实现原理

• iview组件库Form表单， ref="formValidate"，:model="formInline"，:rules="ruleValidate"。
• 选择审核结果的时候动态的设置备注的规则，当为通过为非必填，反之为必填。
• 为备注项设置相应的动态rule：

:rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]"

3.实现代码

<template>
  <div class="content">
    <Card>
      <p slot="title">表单动态校验</p>
      <Form
        :label-width="100"
        ref="formValidate"
        :model="formInline"
        :rules="ruleValidate"
      >
        <FormItem label="审核结果：" prop="status">
          <Select
            v-model="formInline.status"
            placeholder="请选择审核结果"
          >
            <Option value="1">审核通过</Option>
            <Option value="2">审核驳回</Option>
          </Select>
        </FormItem>
        <FormItem
          label="备注："
          prop="remark"
          :rules="
            formInline.status == '2'
              ? ruleValidate.remark
              : [{ required: false }]
          "
        >
          <Input v-model="formInline.remark" type="textarea"></Input>
        </FormItem>
        <div style="text-align: right; padding: 20px 0">
          <Button size="large" type="default" @click="cancelAction" class="mr10"
            >取消</Button
          >
          <Button size="large" type="primary" @click="addAction">确认</Button>
        </div>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        remark: "",
        status: "",
      },
      ruleValidate: {
        status: [
          { required: true, message: "审核结果不能为空", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请填写不通过原因", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addAction() {
      let data = { ...this.formInline };
      console.log(data);
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.$Message.success("操作成功");
          this.cancelAction();
        }
      });
    },
    cancelAction() {
      Object.keys(this.formInline).forEach((key) => {
        this.formInline[key] = "";
      });
      this.$refs["formValidate"].resetFields();
    },
  },
};
</script>

4.完整代码，关注公众号 苏苏的bug，更多vue相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！