效果图：
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>
