本文使用原生js实现表单验证,完成的功能如下:
1. 鼠标触碰到表单时,表单会变大
2. 当输入信息完毕,表单失去焦点时,会有正确或错误的信息提示
3. 当按下回车键时,光标自动移至下一行
一、表单验证效果展示
1.开始界面
2.错误提示界面
3.正确提示界面
二、具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<style>
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
tr,
th,
p,
span,
a,
input {
padding: 0;
margin: 0;
}
input::-webkit-input-placeholder {
color: #999;
}
li {
list-style: none;
}
body {
background-color: #f9fafb;
}
.box {
width: 400px;
height: 555px;
margin: 73px auto;
background-color: #fff;
box-shadow: 5px 3px 8px 10px rgba(0, 0, 0, .1);
transition: all .2s;
}
.box:hover{
transform: scale(1.01);
}
.content {
width: 320px;
margin: auto;
}
.regis_hd {
height: 88px;
width: 100%;
text-align: center;
}
.regis_hd h2 {
width: 100%;
height: 100%;
padding-top: 35px;
padding-bottom: 20px;
}
.content ul li {
width: 100%;
height: 93px;
}
.content ul li p {
height: 22px;
width: 100%;
color: #777;
margin-bottom: 5px;
}
.content ul li input {
width: 100%;
height: 41px;
line-height: 41px;
border: 2px solid #f0f0f0;
text-indent: 10px;
border-radius: 5px;
font-size: 14px;
}
.btn {
width: 100%;
height: 43px;
line-height: 43px;
margin-top: 20px;
border: none;
outline: none;
border-radius: 5px;
background-color: #3498DB;
text-align: center;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.content ul li .extra {
height: 18px;
width: 100%;
line-height: 18px;
font-size: 13px;
color: #e74c3c;
}
.content ul li .change {
height: 18px;
width: 100%;
line-height: 18px;
font-size: 13px;
color: #2ecc71;
}
</style>
<script>
window.addEventListener('load', function () {
var username = document.querySelectorAll('li')[0].querySelector('input');
var email = document.querySelectorAll('li')[1].querySelector('input');
var password = document.querySelectorAll('li')[2].querySelector('input');
var confirm = document.querySelectorAll('li')[3].querySelector('input');
var usernameVal = '';
var emailVal = '';
var pwdVal = '';
var confirmVal = '';
var btn = document.querySelector('.btn');
username.addEventListener(
'blur', function () {
usernameVal = username.value;
if (usernameVal.length < 3) {
username.style.borderColor = '#e74c3c';
document.querySelectorAll('li')[0].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Username must be at least 3 characters';
} else {
username.style.borderColor = '#2ecc71';
username.style.backgroundColor = 'rgb(232, 240, 254)';
document.querySelectorAll('li')[0].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
document.querySelectorAll('li')[0].querySelector('.extra').className = 'change';
}
}
)
username.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
username.blur();
email.focus();
}
})
email.addEventListener('blur', function () {
emailVal = email.value;
var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (!pattern.test(emailVal)) {
email.style.borderColor = '#e74c3c';
document.querySelectorAll('li')[1].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Email is not valid';
} else {
email.style.borderColor = '#2ecc71';
email.style.backgroundColor = 'rgb(232, 240, 254)';
document.querySelectorAll('li')[1].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
document.querySelectorAll('li')[1].querySelector('.extra').className = 'change';
}
})
email.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
email.blur();
password.focus();
}
})
password.addEventListener('blur', function () {
pwdVal = password.value;
if (pwdVal.length < 6) {
password.style.borderColor = '#e74c3c';
document.querySelectorAll('li')[2].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Password must be at least 6 characters';
} else {
password.style.borderColor = '#2ecc71';
password.style.backgroundColor = 'rgb(232, 240, 254)';
document.querySelectorAll('li')[2].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
document.querySelectorAll('li')[2].querySelector('.extra').className = 'change';
}
})
password.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
password.blur();
confirm.focus();
}
})
confirm.addEventListener('blur', function () {
confirmVal = confirm.value;
if (confirmVal != pwdVal | (pwdVal.length < 6)) {
confirm.style.borderColor = '#e74c3c';
document.querySelectorAll('li')[3].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Password do not correspond';
} else {
confirm.style.borderColor = '#2ecc71';
confirm.style.backgroundColor = 'rgb(232, 240, 254)';
document.querySelectorAll('li')[3].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
document.querySelectorAll('li')[3].querySelector('.extra').className = 'change';
}
})
confirm.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
confirm.blur();
btn.click();
}
})
btn.addEventListener('click', function () {
username.blur();
email.blur();
password.blur();
confirm.blur();
})
})
</script>
</head>
<body>
<div class="box">
<div class="content">
<div class="regis_hd">
<h2>Register With Us</h2>
</div>
<ul>
<li>
<p>Username</p>
<input type="text" placeholder="Enter username" autocomplete="on">
<p class="extra"></p>
</li>
<li>
<p>Email</p>
<input type="email" placeholder="Enter email" autocomplete="on">
<p class="extra"></p>
</li>
<li>
<p>Password</p>
<input type="password" placeholder="Enter password" autocomplete="on">
<p class="extra"></p>
</li>
<li>
<p>Confirm Password</p>
<input type="password" placeholder="Enter password again" autocomplete="on">
<p class="extra"></p>
</li>
</ul>
<input type="submit" value="Submit" class="btn">
</div>
</div>
</body>
</html>