<%@ 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>