iview中动态表单校验和下拉多选校验

<template>
  <div>
    <Button @click="openAddModal">
      <Icon type="ios-brush-outline" size="18" />
      <span>新增拍照设备参数</span>
    </Button>

    <Modal v-model="addDeviceModal">
      <Form ref="formValidate" :model="formData" :rules="ruleValidate" :label-width="100">
        <FormItem label="设备名称" prop="name">
          <Input v-model="formData.name" placeholder="输入设备名称"></Input>
        </FormItem>
        <FormItem label="选择内存" prop="memory">
          <Select v-model="formData.memory" placeholder="选择内存" clearable>
            <Option value="128G">128G</Option>
            <Option value="256G">256G</Option>
            <Option value="512G">512G</Option>
            <Option value="1T">1T</Option>
          </Select>
        </FormItem>
        <FormItem label="拍摄场景" prop="shotScene">
          <Select v-model="formData.shotScene" filterable multiple allow-create @on-create="addShotScene">
            <Option v-for="item in shotSceneList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="index==0?'拍摄点位':`拍摄点位${index+1}`" v-for="(item,index) in formData.pointList" :key="index">
          <div>
            <FormItem :prop="'pointList.' + index + '.valueX'" :rules="{required: true, message: '请输入X点位', trigger: 'blur'}">
              <Input v-model="item.valueX" placeholder="请输入X点位"></Input>
            </FormItem>
            <span>-</span>
            <FormItem :prop="'pointList.' + index + '.valueY'" :rules="{required: true, message: '请输入Y点位', trigger: 'blur'}">
              <Input v-model="item.valueY" placeholder="请输入Y点位"></Input>
            </FormItem>
            <Icon type="ios-add-circle-outline" size="24" @click="addPoints" v-show="formData.pointList.length == index+1" />
            <Icon type="ios-remove-circle-outline" size="24" v-show="formData.pointList.length > 1" @click="removePoints(index)" />
          </div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="addDeviceModal=false">取消</Button>
        <Button type="primary" icon="ios-finger-print" @click="confirmAdd">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "formInModal",
  data() {
    return {
      addDeviceModal:false,
      formData: {
        name:"",
        memory:"",
        shotScene:[],
        pointList: [
          {
            valueX:"",
            valueY:"",
          }
        ],
      },
      shotSceneList:[],   // 拍照场景列表

      ruleValidate: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        memory: [
          { required: true, message: '请选择内存', trigger: 'change' }
        ],
        shotScene: [
          { required: true, message: '请输入拍摄场景', trigger: 'change',type:"array" }    // 一定要加上type:"array"，iview默认输入的都是String类型
        ],
      }
    }
  },
  methods:{
    openAddModal(){
      this.addDeviceModal = true;
      this.formData = this.$options.data().formData;
      this.$refs['formValidate'].resetFields();
    },
    confirmAdd(){
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.$Message.success('校验成功!');
          this.addDeviceModal = false;
        } else {
          this.$Message.error('校验失败');
        }
      })
    },
    addShotScene(val){
      this.shotSceneList.push({
        value: val,
        label: val
      });
    },
    addPoints() {
      this.formData.pointList.push(
          {
            valueX:"",
            valueY:"",
          }
      )
    },
    removePoints(index) {
      this.formData.pointList.splice(index,1)
    },
  }
}
</script>

<style scoped>

</style>

<!--
    1。弹框中的form表单的校验不能使用Modal中自带的成功回调方法，需要自定义页脚的确定按钮
    2、iview默认输入的都是String类型，如果是数组的地方增加校验的话，要设置 type="array"
    3、动态增加的表单，如果是多个输入框，就将每个输入框各自套一个 <FormItem><FormItem/>，然后把需要动态增加的部分用div包裹循环
-->

总结：
1、弹框中的form表单的校验不能使用Modal中自带的成功回调方法，需要自定义页脚的确定按钮
2、iview默认输入的都是String类型，如果是数组的地方增加校验的话，要设置 type="array"
3、动态增加的表单，如果是多个输入框，就将每个输入框各自套一个 <FormItem><FormItem/>，然后把需要动态增加的部分用div包裹循环

图片.png

图片.png