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

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>