<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS带提示登录表单验证</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 12px;
}
.box {
390px;
height: 320px;
border: solid 1px #ddd;
background: #FFF;
position: absolute;
left: 50%;
top: 42%;
margin-left: -195px;
margin-top: -160px;
}
.box h2 {
font-weight: normal;
color: #666;
font-size: 16px;
line-height: 46px;
height: 46px;
overflow: hidden;
text-align: center;
border-bottom: solid 1px #ddd;
background: #f7f7f7;
}
.input_box {
350px;
padding-bottom: 15px;
margin: 0 auto;
overflow: hidden;
}
.input_box input {
float: left;
348px;
height: 40px;
font-size: 14px;
border: solid 1px #ddd;
text-indent: 10px;
outline: none;
line-height: 40px;
}
.input_box button {
350px;
height: 48px;
background: #3f89ec;
border: none;
border-radius: 2px;
outline: none;
cursor: pointer;
font-size: 16px;
color: #FFF;
}
#error_box {
height: 40px;
350px;
margin: 0 auto;
line-height: 40px;
color: #fc4343;
}
</style>
</head>
<body>
<div>
<h2>登录</h2>
<div id="error_box"></div>
<div>
<input type="text" placeholder="请输入账户名" id="uname" />
</div>
<div>
<input type="password" placeholder="请输入密码" id="upass" />
</div>
<div>
<button onclick="fnLogin()">登录</button>
</div>
</div>
</body>
<script type="text/javascript">
//长度必须在6~20位之间
//开头不能为数字
//只能包含小写字母和数字
//数字：48~57
//小写字母：97~122
//innerHTML
function fnLogin() {
var oUname = document.getElementById("uname");
var oUpass = document.getElementById("upass");
var oError = document.getElementById("error_box");
var isNotError = true;
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "用户名长度必须在6~20位之间";
isNotError = false;
return;
} else if (oUname.value.charCodeAt(0) >= 48 && oUname.value.charCodeAt(0) <= 57) {
oError.innerHTML = "用户名开头不能为数字";
isNotError = false;
return;
} else {
for (var i = 0; i < oUname.value.length; i++) {
if ((oUname.value.charCodeAt(i) > 122 || oUname.value.charCodeAt(i) < 97) && (oUname.value.charCodeAt(i) > 57 || oUname.value.charCodeAt(i) < 48)) {
oError.innerHTML = "用户名只能包含小写字母和数字";
isNotError = false;
return;
}
}
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "密码长度必须在6~20位之间";
isNotError = false;
return;
}
oError.innerHTML = "登录成功";
}
</script>
</html>