Aphorism

element ui 表单校验 案例写的不够明晰

需求如下

1. 当我选择 TCP , UDP 时候， 设备 Ip 和 端口为必选项
2. 串口通讯选中选中的时候， 串口号必选项
   

代码如下

主要保留了 相关代码

主要思路如下：

1. 需要验证的项 模板中要 添加 prop 属性
2. 对 rules 进行增删操作
3. 操作完 rules 时候 ，通过事件队列来校验或者移除对应项的校验，使得rules 生效

<template>
  <el-form
    label-width="90px"
    ref="form"
    :rules="rules"
    :model="form"
  >
   
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item
          label="通信类型"
          prop="commType"
        >
          <el-radio-group v-model="form.commType">
            <el-radio
              v-for="comm in commTypes"
              :key="comm.label"
              :label="comm.label"
            >{{
              comm.text
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">

        <el-form-item
          label="串口号"
          prop="comno"
        >
          <el-input
            placeholder="请输入串口号"
            v-model="form.comno"
            maxlength="15"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">

        <el-form-item
          label="设备IP"
          prop="deviceIP"
        >
          <el-input
            v-model="form.deviceIP"
            placeholder="请输入设备IP"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">

        <el-form-item
          label="端口号"
          prop="devicePort"
        >
          <el-input
            v-model="form.devicePort"
            placeholder="请输入端口号"
            maxlength="15"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
   
  </el-form>
</template>
<script>
  import { commTypes } from "@/utils/dict";
  import DeviceType from "./DeviceType";
  import validator from '@/utils/validator';
  // 三个验证信息
  let comno = [
    {
      required: true,
      message: "串口号不能为空",
      trigger: "blur"
    }
  ];

  let deviceIP = [
    {
      required: true,
      validator: validator.isValidIp,
      trigger: "blur"
    }
  ];
  let devicePort = [
    {
      required: true,
      validator: validator.isPositiveInt,
      trigger: "blur"
    }
  ];

  export default {
    name: "AddDevice",
    components: {
      DeviceType
    },
    data() {
      return {
        commTypes,
        form: {
          deviceType: '', // 设备类型
          deviceName: "", // 设备名称
          commType: 0, // 通信类型
          comno: "", // 串口号
          deviceIP: "", // 设备IP
          devicePort: "", // 端口号
          loginName: "", // 登陆名称
          loginPass: "", // 登陆密码
          isMain: "", // 是否主设备
          note: "" // 备注
        },
        rules: {
          deviceName: [
            { validator: this.$validator.isValidName, required: true }
          ],
          deviceIP,
          devicePort,
          comno: [],
          deviceType: [
            {
              required: true,
              message: '设备类型不能为空',
              trigger: 'change'
            }
          ]
        }
      };
    },
    watch: {
      "form.commType": function(val) {
        if (val == 2) {
          Object.assign(this.rules, {
            comno,
            deviceIP: [],
            devicePort: []
          });

          setTimeout(() => { // 添加事件队列很重要
            this.$refs.form.validateField(["comno"]);
            this.$refs.form.clearValidate(["deviceIP", "devicePort"]);
          }, 0);
        } else {
          Object.assign(this.rules, {
            deviceIP,
            devicePort,
            comno: []
          });

          setTimeout(() => { // 添加事件队列很重要
            this.$refs.form.validateField(["deviceIP", "devicePort"]);
            this.$refs.form.clearValidate(["comno"]);
          }, 0);
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$api.SysSetting.deviceManage
              .save({ ...this.form })
              .then(resp => {
                this.$message.success("新增成功！");
                this.save(resp);
              });
          } else {
            this.$message.warning("请检查相关数据，再进行提交操作！");
          }
        });
      },
     
  };
</script>
<style lang="stylus">
</style>