vue el-form循环校验问题？

• Z时代
• 2024-03-07
• 分类：IT

openForm: {
        memo: "",
        student_list: [
          { student_name: "", student_phone: "", student_email: "" },
        ],
      }

     <el-form
              :disabled="basicForm.edit_status === '0'"
              ref="studentForm"
              :model="openForm"
              label-width="120px"
              :rules="rules"
              @submit.prevent="submitform"
            >
              <div
                v-for="(item, index) in openForm.student_list"
                :key="index"
                class="student__form"
              >
                <el-form-item
                  :prop="'student_list[' + index + '].student_name'"
                  :rules="rules.student_name"
                >
                  <span slot="label">
                    <span class="formStar">学员{{ index + 1 }}姓名</span>
                  </span>
                  <el-col :span="8">
                    <el-input
                      v-model="item.student_name"
                      clearable
                      placeholder="请输入您的真实姓名"
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item
                  label="手机号"
                  :prop="'student_list[' + index + '].student_phone'"
                  :rules="rules.student_phone"
                >
                  <el-col :span="8">
                    <el-input
                      v-model.trim="item.student_phone"
                      clearable
                      placeholder="请输入真实有效的手机号"
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item
                  label="邮箱"
                  :prop="'student_list[' + index + '].student_email'"
                  :rules="rules.student_email"
                >
                  <el-col :span="8">
                    <el-input
                      v-model.trim="item.student_email"
                      clearable
                      placeholder="请输入常用邮箱"
                    ></el-input>
                  </el-col>
                </el-form-item>
              </div>
            </el-form>

// 学员信息表单校验
      const form2 = new Promise((reslove, reject) => {
        this.$refs.studentForm.validate(async (valid) => {
          if (valid) reslove();
        });
      });
      Promise.all([form1, form2]).then(async () => { });

form表单为循环，个数不确定，如何只局部校验数组里面对象的值不为空的数据

回答：

方法一：

const validateFormFields = (form, index) => {
  const fieldsToValidate = ["student_name", "student_phone", "student_email"];
  const fieldsFilled = fieldsToValidate.filter(field => form[field] !== '');
  if (fieldsFilled.length > 0) {
    fieldsToValidate.forEach(field => {
      if (form[field] === '' && field !== fieldsFilled[0]) {
        // 触发其他两项字段的校验
        this.$refs.studentForm.validateField(`form[${index}].${field}`);
      }
    });
  }
};

方法二：

const validateEmail = (rule, value, callback) => {
  const index = rule.field.split('[')[1].split(']')[0];
  const formItem = this.openForm.form[index];
  if (value || formItem.student_name || formItem.student_phone) {
    if (value) {
      if (detectEmail(value)) {
        // 合法的输入
        callback();
      } else {
        return callback(new Error("请输入正确的邮箱"));
      }
    } else {
      return callback(new Error("邮箱不能为空"));
    }
  } else {
    callback();
  }
};
const validatePhone = (rule, value, callback) => {
  const index = rule.field.split('[')[1].split(']')[0];
  const formItem = this.openForm.form[index];
  if (value || formItem.student_name || formItem.student_email) {
    if (value) {
      if (detectPhone(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的联系方式"));
      }
    } else {
      return callback(new Error("手机号不能为空"));
    }
  } else {
    callback();
  }
};
const validName = (rule, value, callback) => {
  const index = rule.field.split('[')[1].split(']')[0];
  const formItem = this.openForm.form[index];
  if (value || formItem.student_phone || formItem.student_email) {
    if (value) {
      callback();
    } else {
      callback(new Error("请输入联系人"));
    }
  } else {
    callback();
  }
};

以上是 vue el-form循环校验问题？ 的全部内容， 来源链接： utcz.com/p/934525.html