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

最新推荐文章于 2024-04-26 16:58:18 发布

嫣嫣细语

最新推荐文章于 2024-04-26 16:58:18 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/130627461

版权

javascript 同时被 2 个专栏收录

81 篇文章 4 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

该文章展示了一个使用iview组件库创建的Vue.js表单，通过动态设置规则来实现审核结果与备注字段验证的交互。当审核结果为通过时，备注非必填；若为驳回，则备注变为必填。表单验证在提交时触发，确保数据完整性。

摘要由CSDN通过智能技术生成

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>