form表单

element多个form表单如何校验

在日常开发项目中，经常会遇到表单检验，单个表单检验参考官方文档即可，那如果遇到多个form表单如何校验呢？

场景

比如有这样的场景，我点击保存时需要对三个form表单检验，检验通过才可进行保存。否则提示。

思路

这里我才用Promise.all的思想，对每个表单检测，等所有表单询检验通过，如果都通过时触发then，反之，catch中执行失败响应。

具体实现

  const formName = ['form1', 'form2', 'form2']
  const validate = (item) => {
    return new Promise((resolve, reject) => {
      // 判断是否存在
      if (!this.$refs[item]) {
        resolve()
        return false
      }
      // 依次校验所有form表单
      this.$refs[item].validate((valid) => {
        if (valid) {
          resolve()
        } else {
          reject(new Error('提示必填项校验'))
        }
      })
   })
  Promise.all(formName.map(item => validate(item))).then(() => {
    // TODO 成功啦，执行其他操作
  }).catch(() => {
    // TODO 失败啦，给用户提示
  })
}

element通过v-for循环渲染的form表单如何校验

一般情况下单个的form表单校验可直接参考官方文档示例进行操作，那如果我的form表单中有动态添加删除的操作，如何对所有的进行校验呢？

场景

项目中form表单有动态添加、删除操作、是通过for循环渲染出来的q-form-item

思路

参考官方form表单动态增减表单项示例进行操作

具体实现

<q-form
  ref="ruleForm"
  :model="ruleForm"
  label-width=""
  label-position="left"
  class="demo-ruleForm">
  <template v-for="(item, index) in ruleForm.dangerDetailList" class="list-item">
    <q-form-item
      :key="index+'desc'"
      label=""
      :prop="'dangerDetailList.' + index + '.desc'" 
      :rules="checkEventDesc">
      <div class="detail-item">
        <q-input
          v-model="item.desc"
          placeholder="请输入事件描述"
          type="textarea"
          clearable
          show-word-limit
          maxlength="500"/>
      </div>
    </q-form-item>
    <q-form-item
      :key="index+'title'"
      label=""
      :prop="'dangerDetailList.' + index + '.title'"
      :rules="checkName">
      <div class="detail-item">
        <q-input
          v-model="item.title"
          placeholder="请输入名称"
          clearable
          show-word-limit
          maxlength="50"/>
      </div>
    </q-form-item>  
    <q-form-item
      :key="index+'ids'"
      label=""
      :prop="'dangerDetailList.' + index + '.ids'"
      :rules="checkFileUpload">
      <FileUpload
        ref="fileUpload"
        :default-files="item.ids">
        <template v-slot:tip>
          <q-popover
            ref="popover"
            placement="right"
            width="200"
            trigger="hover">
            <p>提示：</p>
            <p>1. 只能上传png、jpg、tif文件</p>
            <p>2. 单个上传图片大小不超过6M;</p>
          </q-popover>
          <i v-popover:popover class="qax-icon-Question-outline" style="margin-left: 8px;" />
        </template>
      </FileUpload>
    </q-form-item>
  </template>
</q-form>

// script
export default {
  data(){
    const validatePass = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请上传图片！'));
      } else {
        callback();
      }
    };
    return {
       ruleForm: {
           dangerDetailList: [{
              desc: '',
              title: '',
              ids: [],
           }],
        },
        checkFileUpload: [
          {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          checkEventDesc: [
            { required: true, message: '请输入事件描述', trigger: 'blur' },
          ],
          checkName: [
            { required: true, message: '名称不能为空', trigger: 'blur' },
        ]
    }
  }
}

效果图