|
|
<html>
|
|
|
<head>
|
|
|
|
|
|
<title>用户登录界面</title>
|
|
|
<meta charset="UTF-8"/>
|
|
|
<style type="text/css">
|
|
|
body{background: url(D:/SQL/ky1.jpg) no-repeat center 0;
|
|
|
background-size: 100%};
|
|
|
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=/^[2][0][1][7][1][3][9][1][9][0][0][4]$/
|
|
|
//获取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=/^[0][9][7][3][5][4]$/;
|
|
|
//获取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;
|
|
|
}
|
|
|
}
|
|
|
//校验确认验证码------------------
|
|
|
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 checkSub(){
|
|
|
checkUname();
|
|
|
checkPwd();
|
|
|
checkCode();
|
|
|
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()">
|
|
|
<body style="background-color:lightgoldenrodyellow">
|
|
|
|
|
|
|
|
|
<div align="center">
|
|
|
<br>
|
|
|
<br>
|
|
|
<br>
|
|
|
<br>
|
|
|
<br>
|
|
|
<h1 >用户登录界面</h1>
|
|
|
<hr />
|
|
|
<form action="main page" method="get" onsubmit="return checkSub()">
|
|
|
<table border="0px" cellspacing="0" cellpadding="2px" >
|
|
|
<tr>
|
|
|
<td width="80px">用户名：</td>
|
|
|
<td width="400px">
|
|
|
<input type="text" name="uname" id="uname" value="" alt="用户名"/>
|
|
|
<span id="unameSpan">
|
|
|
|
|
|
</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>密 码：</td>
|
|
|
<td>
|
|
|
<input type="password" name="pwd" id="pwd" value="" />
|
|
|
<span id="pwdSpan">
|
|
|
|
|
|
</span>
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
<tr>
|
|
|
|
|
|
<td>验证码：</td>
|
|
|
<td>
|
|
|
<input type="text" id="code" value="" style="width:100px;" />
|
|
|
<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>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
