elementui el-form循环表单校验问题?

    <el-row>
            <div class="form-title">学员信息</div>
            <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
                      @blur="checkFormEdit(index)"
                      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
                      @blur="checkFormEdit(index)"
                      v-model.trim="item.student_email"
                      clearable
                      placeholder="请输入常用邮箱"
                    ></el-input>
                  </el-col>
                </el-form-item>
              </div>
              <el-form-item label="留言">
                <el-col :span="8">
                  <el-input
                    type="textarea"
                    maxlength="200"
                    placeholder="请输入内容"
                    v-model="openForm.memo"
                    :resize="
                      basicForm.edit_status === '0' ? 'none' : 'vertical'
                    "
                  >
                  </el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </el-row>

image.png

  const validateEmail = (rule, value, callback) => {
      const starRegex = /\*+/; // 匹配包含星号的字符串
      if (!value) return callback(new Error("请输入邮箱地址"));
      if (value && !starRegex.test(value)) {
        if (detectEmail(value)) {
          // 合法的输入
          callback();
        } else {
          return callback(new Error("请输入正确的邮箱"));
        }
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback, index) => {
      console.log(index);
      console.log(index, "index2");
      const starRegex = /\*+/; // 匹配包含星号的字符串
      if (!value) return callback(new Error("手机号不能为空"));
      if (value && !starRegex.test(value)) {
        if (detectPhone(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的联系方式"));
        }
      } else if (
        typeof index === "number" &&
        this.openForm.student_list[index].student_phone !=
          this.originalStudentList[index].student_phone &&
        starRegex.test(value)
      ) {
        callback(new Error("请输入正确的联系方式"));
      } else {
        console.log("2222");
        callback();
      }
    };
    const validName = (rule, value, callback) => {
      if (value) value = value.trim();
      if (!value)
        return callback(new Error("请输入真实姓名,中文或英文,20个字符内"));
      if (isChinese(value)) {
        callback();
      } else {
        callback(new Error("请输入真实姓名,中文或英文,20个字符内"));
      }
    };
     rules: {
        student_name: [
          {
            validator: validName,
            required: true,
            trigger: "blur",
          },
        ],
        student_phone: [
          {
            validator: (rule, value, callback) => {
              validatePhone(rule, value, callback, this.formIndex);
            },
            trigger: "blur",
            required: true,
          },
          // {
          //   validator: validatePhone,
          //   trigger: "blur",
          //   required: true,
          // },
        ],
        student_email: [
          { validator: validateEmail, trigger: "blur", required: true },
        ],
        contact_name: [
          { validator: validName, trigger: "blur", required: true },
        ],
        contact_phone: [
          {
            validator: validatePhone,
            trigger: "blur",
            required: true,
          },
        ],

        contact_email: [
          { validator: validateEmail, trigger: "blur", required: true },
        ],
      },

image.png
当提交表单时,检查手机号有没有修改过,如果有修改过并且还带有星号就去校验,但是因为form是循环,只要出现一个带有星号的所有的该字段都会校验并报错,如何只校验我form数组某一项的这个字段

阅读 2.4k
1 个回答
const validatePhone = (index) => {
  return (rule, value, callback) => {
    const starRegex = /\*+/; // 匹配包含星号的字符串
    if (!value) return callback(new Error("手机号不能为空"));
    if (value && !starRegex.test(value)) {
      if (detectPhone(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的联系方式"));
      }
    } else if (
      typeof index === "number" &&
      this.openForm.student_list[index].student_phone !=
        this.originalStudentList[index].student_phone &&
      starRegex.test(value)
    ) {
      callback(new Error("请输入正确的联系方式"));
    } else {
      console.log("2222");
      callback();
    }
  };
};

然后:

<el-form-item
  label="手机号"
  :prop="'student_list[' + index + '].student_phone'"
  :rules="validatePhone(index)"
>
  <el-col :span="8">
    <el-input
      @blur="checkFormEdit(index)"
      v-model.trim="item.student_phone"
      clearable
      placeholder="请输入真实有效的手机号"
    ></el-input>
  </el-col>
</el-form-item>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题