vue+elment(登录，注册)同表单验证解决方案。

1. 定义一个登录注册的弹出框，定义表单。
2. 这里我是使用同一个表单实现登录和注册的两个功能（同时通过elmentui对表单进行验证）
3. 总dom如下：

<!-- 注册登录弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="340px"
      :before-close="handleClose"
    >
      <div class="login">
        <div class="title">
          <img src="../assets/logo/Visionlogo-hei.png" alt="" />
        </div>
        <div class="form">
          <el-form
            :model="LoginForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <div class="titlelogin">Email</div>
            <el-form-item prop="email">
              <el-input
                v-model="LoginForm.email"
                placeholder="请输入您的邮箱"
                prefix-icon="el-icon-message"
                clearable
              ></el-input>
            </el-form-item>
            <div class="titlelogin">Password</div>
            <el-form-item prop="password">
              <el-input
                v-model="LoginForm.password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                type="password"
                clearable
                show-password
              ></el-input>
            </el-form-item>
            <div class="titlelogin" v-if="loginres">Confirm Password</div>
            <el-form-item prop="checkPass">
              <el-input
                v-model="LoginForm.checkPass"
                placeholder="请确认您的密码"
                prefix-icon="el-icon-lock"
                v-if="loginres"
                type="password"
                clearable
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="forgetpassword">
            <router-link to="/index">忘记密码?</router-link>
            <div v-if="!loginres" class="gologin" @click="changeloginres">
              没有账号去注册
            </div>
            <div v-else class="gologin" @click="changeloginres">
              已有账号去登录
            </div>
          </div>
          <button v-if="!loginres" @click="submitLoginForm('ruleForm')">
            登 录
          </button>
          <button v-else @click="submitResForm('ruleForm')">注 册</button>
        </div>
      </div>
    </el-dialog>

5.数据方法汇总：

 data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("小主,密码不能为空"));
      } else {
        if (this.LoginForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    if (this.loginres) {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.LoginForm.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
    }

    return {
      dialogVisible: false, //登录对话框
      LoginForm: {
        email: "", //邮箱
        password: "", //密码
        checkPass: "", //确认密码
      },
      loginres: false, //登录注册切换
      //表单验证规则
      rules: {
        email: [
          {
            required: true,
            message: "小主,邮箱不能为空",
            trigger: "blur",
          },
          {
            type: "email",
            message: "小主,请输入合法的邮箱",
            trigger: "blur",
          },
        ],
        password: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    btnlogin1() {
      this.dialogVisible = true;//点击登录按钮显示弹出框
    },
    handleClose() {
      console.log("触发了关闭事件");
      if (this.loginres) this.loginres = false;//将切换置为false，还原表单
      this.$refs.ruleForm.resetFields();//清楚表单验证
      this.dialogVisible = false;
    },
    //点击登陆注册变换显示
    changeloginres() {
      this.loginres = !this.loginres;
      this.$refs.ruleForm.resetFields();
    },
    //这是登录按钮事件
    submitLoginForm(formName) {
      console.log("点击率登录");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //这是注册按钮事件
    submitResForm(formName) {
      console.log("点击了注册");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },

6. 为了避免在登陆时表单也验证确认密码项，我们可以通过this.loginres来是否定义验证确认密码的验证项。

var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("小主,密码不能为空"));
      } else {
        if (this.LoginForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    if (this.loginres) {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.LoginForm.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };

 7.其他看我的代码应该即可理解。