<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>管理员登录界面</title>
<meta charset="UTF-8"/>
<link type="text/css" href="css/ye.css" rel="stylesheet" />
<style type="text/css">
body{background: url(img/a.jpg) no-repeat center 0};
font{color="darkgray"};
tr{height:60px}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//常见验证码
function createCode(){
//创建随机4位数字，math.floor向下取整
var code=Math.floor(Math.random()*9000+1000);
//获取元素对象
var span=document.getElementById("codeSpan");
//将数字存放到span中
span.innerHTML=code;
//给span添加背景图片
}
//验证用户名
function checkUname(){
//获取用户获得用户名信息
var uname=document.getElementById("uname").value;
//创建校验规则,用户名2-4个
var reg=/^[\da-zA-Z_\u4e00-\u9f5a]{4,10}$/
//获取span对象
var unameSpan=document.getElementById("unameSpan");
//开始交验
if(unameSpan==""||unameSpan==null){
//输入校验结果
unameSpan.innerHTML="*用户名不能为空";
unameSpan.style.color="red";
return false;
}else if(reg.test(uname)){
//输入校验结果
unameSpan.innerHTML="*用户名通过";
unameSpan.style.color="green";
return true;
}else{
//输入校验结果
unameSpan.innerHTML="*用户名格式不符"
unameSpan.style.color="red";
return false;
}
}
//验证密码
function checkPwd(){
//获取用户获得用户名信息
var upwd=document.getElementById("pwd").value;
//创建校验规则,密码要求6-8位，首位为字母，后面5-7位是数字
var reg=/^[\da-zA-Z_\u4e00-\u9f5a]{4,10}$/
//获取span对象
var span=document.getElementById("pwdSpan");
//开始交验
if(span==""||span==null){
//输入校验结果
span.innerHTML="*密码不能为空";
span.style.color="red";
return false;
}else if(reg.test(upwd)){
//输入校验结果
span.innerHTML="*密码通过";
span.style.color="green";
return true;
}else{
//输入校验结果
span.innerHTML="*密码格式不符"
span.style.color="red";
return false;
}
//第一次密码为a123456，第二次密码为a1234567，则修改的第一次密码，确认密码也会重新校验
checkPwd2();
}
//校验确认验证码------------------
function checkCode(){
//获取用户输入验证码
var code=document.getElementById("code").value;
//获取随机验证码
var code2=document.getElementById("codeSpan").innerHTML;
//获取span对象
var span=document.getElementById("codeSpan2");
//比较前两次密码是否相同
if( code==""|| code==null){
//输入校验结果
span.innerHTML="*验证码不能为空";
span.style.color="red";
createCode();
return false;
}else if(code==code2){
//输入校验结果
span.innerHTML="*验证码通过";
span.style.color="green";
return true;
}else{
//输入校验结果
span.innerHTML="*验证码错误"
span.style.color="red";
createCode();
return false;
}
}
//校验是否同意公司协议
function checkAgree(){
// //获取提交按钮的disable属性,选中框后disabled的值为1.
// alert(document.getElementById("sub").disabled);
document.getElementById("sub").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
checkUname();
checkPwd();
return checkUname()&&checkPwd()&&checkCode();
}
//----------------------------------------------------------------------------------------------------------------------
//封装校验：相同的保留，不同的传参
function checkField(id,reg){
//获取用户数据
var inp=document.getElementById(id);
var va=inp.value;
var alt=inp.alt;
//创建校验规则
//获取span对象
var span=document.getElementById(id+"Span");
//开始校验
if(va==""||va==null){
//输入校验结果
span.innerHTML="*"+alt+"不能为空";
span.style.color="red";
return false;
}else if(reg.test(va)){
//输入校验结果
span.innerHTML="*"+alt+"通过";
span.style.color="green";
return true;
}else{
//输入校验结果
span.innerHTML="*"+alt+"格式不符";
span.style.color="red";
return false;
}
}
</script>
</head>
<body onload="createCode()">
<h3 align="center">管理员登录界面</h3>
<hr />
<form action="dologin.jsp" method="post" onsubmit="return checkSub()">
<table border="0px" cellspacing="0" cellpadding="2px" align="center">
<tr>
<td align="right" width="80px">用户名：</td>
<td width="400px">
<input type="text" name="username" id="uname" value="" onblur="checkUname()" alt="用户名" placeholder="username"/>
<span id="unameSpan">
</span>
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td width="400px">
<input type="password" name="password" id="pwd" value="" onblur="checkPwd()" placeholder="password"/>
<span id="pwdSpan">
</span>
</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td>
<input type="text" id="code" value="" style="80px;" onblur="checkCode()" placeholder="code"/>
<span id="codeSpan" style="background-image: url(img/背景.png);color: black;" onclick="createCode()">
</span>
<span id="codeSpan2"></span>
</td>
</tr>
<tr>
<td colspan="2" >
<input type="submit" id="sub" name="sub" value="登录"/>
</td>
</tr>
</table>
</form>
</body>
</html>