关于form表单提示框消息重叠问题

关于form表单提示框消息重叠问题

这几天做了一个vue项目，用的是element-ui插件，网页里面有用到表单的组件，在进行验证的时候发现提示框重叠，

<template>
           <!-- 用户名输入框 -->
          <p class="input-p">*****</p>
          <div class="input-t input-input">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="input-form">
              <el-form-item prop="name" v-model="ruleForm.name">
                <span class="input-t1 in-sp-img">
                  <img src="../assets/user.png" />
                </span>
                <el-input class="input-t1" type="text" placeholder="请输入用户名" v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 密码输入框 -->
          <div class="input-b input-input">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="input-form">
              <el-form-item prop="pass" v-model="ruleForm.pass">
                <span class="input-b1 in-sp-img">
                  <img src="../assets/password.png" />
                </span>
                <el-input
                  class="input-b1"
                  type="password"
                  placeholder="请输入密码"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                >
                  <!-- show-password 显示密码输入信息-->
                </el-input>
              </el-form-item>
            </el-form>
          </div>
 </template>

data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        pass: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {min: 3, max: 10,message: "请输入长度在 3 到 10 个字符",  trigger: "blur" }
        ],
        pass: [
          { validator: validatePass, trigger: "blur" },
          { min: 3,   max: 10, message: "请输入长度在 3 到 10 个字符", trigger: "blur"  }
        ]
      },

      methods: {
        submitForm(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    };
  }
};
<style>
   .input-p {
  font-size: 28px;
  margin-left: -30px;
  margin-bottom: 60px;
  font-weight: bold;
  color: #000000;
}
.input-input {
  width: 320px;
  height: 40px;
  margin-top: 30px;
  /* position: absolute;
  top: 100px;
  left: 0; */
}
</style>

这里面 最重要的就是.input-input，因为他涉及了一个输入框定位问题，而提示框是根据输入框的位置进行提示，
如果两个输入框用一个类名的话就不要用定位，直接用margin值就行，解决了输入框间距问题和提示框定位问题，
希望大家不要跟我犯这么低级的错误。