el-form表单校验与v-if使用时表单校验失效

el-form表单校验与v-if使用时表单校验失效

表单校验注意事项

1、model

el-form标签上的属性:model要绑定表单数据的数据对象

2、rules

el-form标签上的属性:rules要绑定表单校验规则的对象

el-form-item标签的prop属性要对应rules绑定对象的属性

注意：rules绑定对象的属性最好是存在于:model绑定对象的属性

3、ref

获取该表单DOM结构，可以调用validate方法来校验表单

方法一：使用传参的形式

// formName为el-from绑定的ref
formValidate(formName){
	this.$refs[formName].validate((valid)=>{
        // valid 是表单校验的结果 valid:Boolean
    })
}

// 调用
<button @click='formValidate('formName')'></button>

方法二：不传参，直接获取

formValidate(){
    // formName为el-from绑定的ref
	this.$refs.formName.validate((valid)=>{
        // valid 是表单校验的结果 valid:Boolean
    })
}

4、el-form或el-form-item与v-if一起使用的时候需要注意加key值

下面是本人踩过的坑，希望可以帮助大家

图一：这是没有给表单加key值的时候，表单校验失效

图二：这是给表单加上key值的时候，表单校验就可以了

代码如下:

    <!-- 这是第一个el-form -->
<template>
<el-form
      :model="mailVerify"
      :rules="mailRules"
      ref="mailVerify"
      key="mailVerify" ------------重点key
      v-if="step === 2"
    >
      <el-form-item style="margin-bottom: 10px">
        <div class="title">
          <span>找回密码</span>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="secondNext('mailVerify')"
          >下一步</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 这是第二个el-form -->
      <el-form
        :model="newPwd"
        :rules="newPwdRules"
        ref="newPwd"
        key="newPwd" ----------重点key
        v-if="step === 3"
      >
        <el-form-item style="margin-bottom: 10px">
          <div class="title">
            <span>找回密码</span>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <span>设置新密码</span>
          <el-input
            v-model="newPwd.password"
            placeholder="新密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rePassword"> 
          <el-input
            v-model="newPwd.rePassword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="newPwdConfirm('newPwd')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") {
        console.log("新密码位空！");
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        console.log("再次输入密码");
        callback(new Error("请再次输入密码"));
      } else if (value !== this.newPwd.password) {
        console.log("两次输入不一致");
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validMail = (rule, value, callback) => {
      let reg =
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };

    return {
      step: 1,
      mailVerify: {
        mail: "",
      },
      mailRules: {
        mail: [
          { required: true, message: "请输入电子邮箱", trigger: "blur" },
          { validator: validMail, trigger: ["blur", "change"] },
        ],
      },
      newPwd: {
        password: "",
        rePassword: "",
      },
      // 新密码的校验规则
      newPwdRules: {
        password: [
          { validator: validatePass, trigger: "blur" },
        ],
        rePassword: [{ validator: validatePass2, trigger: "blur" }],
      },
      // 修改结果信息
      result: {
        icon: "success",
        title: "操作成功",
        subTitle: "新密码已经设置成功！",
      },
    };
  },
  methods: {
    secondNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("邮箱格式正确");
          this.step++;
        } else {
          console.log("邮箱格式失败");
        }
      });
    },
    // 设置新密码确定
    newPwdConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.step++;
          console.log("校验成功！");
        } else {
          console.log("校验失败！");
        }
      });
    },
};
</script>