JS_登录表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
- 用户是否已填写表单中的必填项目？
- 用户输入的邮件地址是否合法？
- 用户两次输入的密码是否一致？
- 用户是否在数据域中输入了文本？
这里写了几个常用的表单验证项
-
先看效果图吧
表单验证.jpg HTML
<body>
<header>
<div class="header-con clear-fix">
<h1>
<a href="#"></a>
</h1>
<p>欢迎注册</p>
<div class="have-account">
已有账号？
<a href="#">请登录></a>
</div>
</div>
</header>
<div class="container clear-fix">
<form class="form-signin" action="javascript:void(0)">
<h2 class="form-signin-heading">请登录</h2>
<!-- 用户名 -->
<div class="inputArea">
<label for="inputUsername" class="sr-only">用户名</label>
<input type="text" id="inputUsername" class="form-control" maxlength="20" placeholder="支持中文、英文、数字、“-”、“_”的组合，4-20个字符">
<span class="tip"></span>
</div>
<!-- 密码 -->
<div class="inputArea">
<label for="inputPassword" class="sr-only">设置密码</label>
<input type="password" id="inputPassword" class="form-control" maxlength="20" placeholder="建议使用两种或两种以上字符组合">
<span class="tip"></span>
</div>
<!-- 确认密码 -->
<div class="inputArea">
<label for="confirmPassword" class="sr-only">确认密码</label>
<input type="password" id="confirmPassword" class="form-control" maxlength="20" placeholder="请再次输入密码">
<span class="tip"></span>
</div>
<!-- 邮箱 -->
<div class="inputArea">
<label for="inputEmail" class="sr-only">邮箱</label>
<input type="email" id="inputEmail" class="form-control" maxlength="50" placeholder="请绑定您的邮箱">
<span class="tip"></span>
</div>
<!-- 登录按钮 -->
<button id="signin" class="btn btn-block" type="submit">立即注册</button>
</form>
</div>
</body>
- CSS
<style>
* {
margin: 0;
padding: 0;
}
.clear-fix:after {
content: "";
height: 0;
clear: both;
display: block;
visibility: hidden;
overflow: hidden;
}
header {
height: 110px;
background: url(https://misc.360buyimg.com/user/reg/3.0.0/css/i/headbg.jpg)repeat-x left bottom;
}
.header-con {
width: 1210px;
margin: 0 auto;
}
.header-con h1 {
width: 160px;
height: 50px;
float: left;
margin-top: 24px;
background: url(https://misc.360buyimg.com/user/reg/3.0.0/css/i/icon.png);
}
.header-con p {
float: left;
height: 34px;
line-height: 34px;
font-size: 24px;
color: #333;
margin-top: 34px;
}
.have-account {
float: right;
font-size: 16px;
margin-top: 55px;
color: #999;
}
.have-account a {
color: #e22;
text-decoration: none;
}
.have-account a:hover {
text-decoration: underline;
}
.container {
margin: 50px auto;
}
.form-signin {
width: 400px;
margin: 0 auto;
}
.inputArea {
border: solid 1px #ddd;
width: 398px;
height: 52px;
position: relative;
margin-bottom: 35px;
}
.inputArea:hover {
border-color: rgb(121, 120, 120);
}
.inputArea label {
width: 70px;
height: 52px;
display: block;
float: left;
font-size: 14px;
text-align: justify;
color: #666;
line-height: 50px;
padding-left: 20px;
padding-right: 40px;
text-align-last: justify;
-moz-text-align-last: justify;
}
.inputArea label:after {
display: inline-block;
content: '';
overflow: hidden;
width: 100%;
height: 0;
}
.form-control {
width: 230px;
height: 52px;
border: none;
outline: none;
}
.tip {
position: absolute;
display: block;
font-size: 14px;
padding-top: 4px;
padding-left: 10px;
color: orangered;
}
.btn-block {
background: #e2231a;
color: #fff;
border: none;
outline: none;
width: 100%;
height: 54px;
line-height: 54px;
text-align: center;
cursor: pointer;
font-size: 16px;
}
.btn-block:hover {
background: #c81623;
color: #eababc;
}
.success {
border-color: yellowgreen!important;
}
.failed {
border-color: orangered!important;
}
</style>
- JavaScript
var validateData = {
"#inputUsername": {
validFn: validateUsername,
failedTip: "支持中文、英文、数字、“-”、“_”的组合，4-20个字符"
},
"#inputPassword": {
validFn: validatePassword,
failedTip: "建议使用字母、数字和符号两种及以上的组合，6-20个字符"
},
"#confirmPassword": {
validFn: confirmPassword,
failedTip: "两次输入密码不符"
},
"#inputEmail": {
validFn: validateEmail,
failedTip: "请输入正确的邮箱"
}
}
function $(selector) {
var ele = null;
return (ele = document.querySelectorAll(selector)).length === 1 ? ele[0] : ele;
}
function validate(value, validFn, tip) {
this.nextElementSibling.innerHTML = "";
this.parentNode.style.borderColor = "#ddd";
validFn(value) ? success.call(this) : failed.call(this, tip);
}
function success() {
// 给当前元素 , 加上class名 success;
// alert("成功验证");
if (/failed/.test(this.parentNode.className)) {
this.parentNode.className = this.parentNode.className.replace("failed", "success")
} else {
this.parentNode.className += /success/.test(this.parentNode.className) ? "" : " success";
}
this.nextElementSibling.innerHTML = "";
}
function failed(tip) {
// alert("失败验证");
if (/success/.test(this.parentNode.className)) {
this.parentNode.className = this.parentNode.className.replace("success", "failed")
} else {
this.parentNode.className += /failed/.test(this.parentNode.className) ? "" : " failed";
}
this.nextElementSibling.innerHTML = tip;
}
function validateUsername(value) {
var reg = /^[\u4e00-\u9fa5a-zA-Z0-9\-_]{4,20}$/;
return reg.test(value)
}
function validatePassword(value) {
var passwordLevel = 0;
var passwordLevelReg = {
num_reg: /\d/,
letter_reg: /[a-zA-Z]/,
symbol_reg: /[^0-9a-zA-Z]/
}
for (var attr in passwordLevelReg) {
if (passwordLevelReg[attr].test(value)) {
passwordLevel++;
}
}
return passwordLevel >= 2 && /[\s\S]{6,20}/.test(value);
}
function confirmPassword(value) {
var password = inputPassword.value;
if (password === "") {
return false;
}
// 如果password不为空;
return value === password
}
function validateEmail(value) {
var reg = /^\w{4,20}@[0-9a-zA-Z]{2,20}\.(com|cn|net)$/;
return reg.test(value)
}
function handlerBlur(validFn, tip) {
return function() {
// 取值 ;
var value = this.value;
validate.call(this, value, validFn, tip)
}
}
for (var attr in validateData) {
$(attr).addEventListener("blur", handlerBlur(validateData[attr].validFn, validateData[attr].failedTip));
}
