开发day1

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

  
  <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="width: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>

猜你喜欢