Vue<自定义表单校验>

效果图：

image.png

关键代码：

    //提交时校验
    submitVerify(type) {
      let _this = this;
      let verify_form, hint_form;
      verify_form = _this.loginForm;
      hint_form = _this.hintMsg;
      let ObjectList = Object.getOwnPropertyNames(verify_form);
      for (let key in verify_form) {
        for (let i = 0; i < ObjectList.length; i++) {
          if (key == ObjectList[i] && !verify_form[key]) {
            if (hint_form[i].required == true) {
              hint_form[i].error = true;
            } else {
              hint_form[i].error = false;
            }
          }
        }
      }
      for (let i = 0; i < hint_form.length; i++) {
        if (hint_form[i].error) {
          return false;
        }
      }
      return true;
    }

image.png

代码如下：

<template>
  <div class="overall">
    <div class="login_box">
      <div id="input_box">
        <span class="label">
          <i class="el-icon-user"></i>
        </span>
        <div class="input_text">
          <input
            type="text"
            v-model="loginForm.name"
            @blur="formVerify(0,isvalidPhone(loginForm.name))"
          />
          <span
            v-if="hintMsg[0].error"
            class="msg_hint"
            :class="hintMsg[0].error?'m_h_focus error':''"
          >{{hintMsg[0].message}}</span>
          <span
            v-else
            class="msg_hint"
            :class="loginForm.name?'m_h_focus':''"
          >{{hintMsg[0].message}}</span>
          <span class="clear" @click="loginForm.name = ''" v-if="loginForm.name">
            <i class="el-icon-circle-close"></i>
          </span>
        </div>
      </div>
      <div id="input_box">
        <span class="label">
          <i class="el-icon-lock"></i>
        </span>
        <div class="input_text">
          <input type="text" v-model="loginForm.pass" @blur="formVerify(1,isPwd(loginForm.pass))" />
          <span
            v-if="hintMsg[1].error"
            class="msg_hint"
            :class="hintMsg[1].error?'m_h_focus error':''"
          >{{hintMsg[1].message}}</span>
          <span
            v-else
            class="msg_hint"
            :class="loginForm.pass?'m_h_focus':''"
          >{{hintMsg[1].message}}</span>
          <span class="clear" @click="loginForm.pass = ''" v-if="loginForm.pass">
            <i class="el-icon-circle-close"></i>
          </span>
        </div>
      </div>
      <div class="login" @click="submitVerify()">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        name: "",
        pass: ""
      },
      hintMsg: [
        {
          message: "请输入11位的手机号",
          error: false,
          required: true
        },
        {
          message: "请输入6 ~ 18位的密码",
          error: false,
          required: true
        }
      ]
    };
  },
  methods: {
    // 手机号验证
    isvalidPhone(str) {
      const reg = /^1\d{10}$/;
      return reg.test(str);
    },
    // 字母和数字6～18位，密码校验规则
    isPwd(str) {
      if (str == null || str.length > 18 || str.length < 6) {
        return false;
      }
      const reg = /^(?![^a-zA-Z]+$)(?!\D+$)/;
      console.log(reg.test(str));
      return reg.test(str);
    },
    formVerify(index, result) {
      console.log(result);
      let _this = this;
      _this.hintMsg[index].error = !result;
    },
    //提交时校验
    submitVerify(type) {
      let _this = this;
      let verify_form, hint_form;
      verify_form = _this.loginForm;
      hint_form = _this.hintMsg;
      let ObjectList = Object.getOwnPropertyNames(verify_form);
      for (let key in verify_form) {
        for (let i = 0; i < ObjectList.length; i++) {
          if (key == ObjectList[i] && !verify_form[key]) {
            if (hint_form[i].required == true) {
              hint_form[i].error = true;
            } else {
              hint_form[i].error = false;
            }
          }
        }
      }
      for (let i = 0; i < hint_form.length; i++) {
        if (hint_form[i].error) {
          return false;
        }
      }
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.overall {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(72, 132, 241);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login{
  width: 100px;
  height: 40px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 50px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: bold;
  &:active{
    opacity: 0.9;
  }
}
#input_box {
  display: inline-block;
  width: 300px;
  height: 40px;
  //   background: red;
  flex-wrap: nowrap;
  display: flex;
  align-items: flex-end;
  margin-top: 30px;
  .label {
    white-space: nowrap;
    margin-right: 10px;
    font-size: 17px;
    text-align: right;
    i {
      font-size: 25px;
      color: white;
    }
  }
  .input_text {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    &:hover .clear {
      opacity: 1;
    }
    .clear {
      position: absolute;
      right: 7px;
      cursor: pointer;
      color: white;
      opacity: 0;
    }
    input {
      outline: none;
      color: white;
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      border-bottom: 2px solid white;
      font-size: 16px;
      padding: 0;
      padding-right: 25px;
      &:focus ~ .msg_hint {
        transform: translateY(calc(-200% + 8px)) translateX(0px) scale(0.9);
        // font-size: 13px;
      }
    }
    .msg_hint {
      user-select: none;
      pointer-events: none;
      transition: transform 0.3s;
      position: absolute;
      transform-origin: 0 50%;
      transform: translateY(0) translateX(0px) scale(1);
      font-size: 14px;
      color: white;
    }
    .m_h_focus {
      transform: translateY(calc(-200% + 8px)) translateX(0px) scale(0.9);
      color: white;
      //   font-size: 13px;
    }
    .m_h_focus.error {
      color: #fd4343;
    }
  }
}
</style>