Form表单如何在提交时只显示一项错误项

Thu, Nov 14, 2019

<el-form
    class="form"
    :rules="rules"
    ref="ruleForm"
    :model="ruleForm"
    hide-required-asterisk
>
    <div class="myPurse-form">
        <el-form-item class="myPurse-formGroup" label="手机号码">
            <div class="myPurse-formGroup-inputContainer">
            <input
                type="text"
                :value="tel"
                disabled
                class="myPurse-formGroup-inputContainer__input"
            />
            </div>
        </el-form-item>
        <el-form-item class="myPurse-formGroup" label="短信验证码" prop="code">
            <el-input
            type="text"
            class="myPurse-formGroup-inputContainer__input"
            placeholder="请输入验证码"
            v-model="ruleForm.code"
            />
            <code-button
            class="myPurse-formGroup_btn myPurse-formGroup_btn--button"
            templateId="14842311"
            @codeReturn="codeReturn"
            >获取验证码</code-button
            >
        </el-form-item>

        <el-form-item
            class="myPurse-formGroup"
            label="交易密码"
            prop="password"
        >
            <el-input
            type="password"
            class="myPurse-formGroup-inputContainer__input"
            placeholder="请输入交易密码"
            v-model="ruleForm.password"
            />
            <a
            href="javascript:void(0)"
            class="myPurse-formGroup_btn myPurse-formGroup_btn--link"
            ></a>
        </el-form-item>

        <el-form-item
            class="myPurse-formGroup"
            label="确认交易密码"
            prop="confirmPassword"
        >
            <el-input
            type="password"
            class="myPurse-formGroup-inputContainer__input"
            placeholder="请输入交易密码"
            v-model="ruleForm.confirmPassword"
            />
            <a
            href="javascript:void(0)"
            class="myPurse-formGroup_btn myPurse-formGroup_btn--link"
            ></a>
        </el-form-item>

        <el-form-item class="myPurse-formGroup myPurse-btnLists" label=" ">
            <button
            class="myPurse-btnLists__btn myPurse-btnLists__btn--skyblue"
            @click.prevent="resetTransactionPassword"
            >
            确定
            </button>
        </el-form-item>
    </div>
</el-form>

export default {
  data() {
    return {
      tel: "",
      ruleForm: {
        password: "",
        confirmPassword: "",
        code: "",
        nonce: "",
        curTime: "",
        checkSum: ""
      },
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validate.password, trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入交易密码", trigger: "blur" }],
        confirmPassword: [
          { required: true, message: "请输入交易密码", trigger: "blur" },
          { validator: validate.password, trigger: "blur" },
        ]
      }
    };
  },
  methods: {
      check() {
        let form = this.$refs["ruleForm"];
        form.validate(async (valid,fields) => {
            try {
                if(!this.validateConfirmPass()) {
                throw new Error("两次密码输入不一致");
                }
                if (valid) {
                    // 调用接口
                    await myPurse.updateTransactionPassword(this.ruleForm);
                    // 调用成功后的相关操作
                    ...codes
                } else {
                // 清楚不要的检测字段
                let fieldsArr = Object.keys(fields);
                let props = fieldsArr.slice(1);
                if(props.length) {
                    form.clearValidate(props)
                }
                let formEl = form.$el;
                setTimeout(() => {
                    let errorParent = formEl
                        .querySelector(".el-form-item__error")
                        .closest(".el-form-item__content");
                    let FirstInputEl = errorParent.querySelector("input");
                    if (FirstInputEl instanceof Element) {
                        FirstInputEl.focus();
                    }
                    errorParent.scrollIntoViewIfNeeded
                        ? errorParent.scrollIntoViewIfNeeded()
                        : errorParent.scrollIntoView();
                }, 0);
                throw new Error(fields[fieldsArr[0]][0].message);
                }
            } catch (e) {
                this.$errorMessage(e.message);
            }
        });
      }
  }