新闻项目登录页面-表单验证

最新推荐文章于 2024-09-10 08:00:00 发布

Rtai

最新推荐文章于 2024-09-10 08:00:00 发布

阅读量95

点赞数 1

文章标签： java eclipse

本文链接：https://blog.csdn.net/m0_61023445/article/details/123762144

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户登录</title>
<link href="images/login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
   function yz() {
       //随机出4个0-字符串长度之间的数字做为下标
       yzmStr="";
       for(var i=1;i<=4;i++){
           yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
       }
       //把验证码赋值到页面
       document.getElementById("syzm").innerHTML=yzmStr;
   }


   function $(id) {
       return document.getElementById(id);
   }

   function login_yz() {
       //验证用户名和密码不能为空
       //获取用户名
       var uname = $("uname").value;
       if(uname.length==0){
           alert("用户名不能为空");
           return false;
       }
       //获取密码
       var upwd = $("upwd").value;
       if(upwd.length==0){
           alert("密码不能为空");
           return false;
       }

       //获取验证码:判断和电脑的验证码是否相等
       //PS：自己实现-输入的验证码不区分大小写-大小写转换
       var yzm = $("uyzm").value;
       if(yzm!=yzmStr){
           alert("验证码输入错误，请重新输入");
           //清空输入的验证码
           $("uyzm").value="";
           //重新生成验证码
           yz();
           return false;
       }

   }

</script>
</head>
<body οnlοad="yz()">

       <div id="center">
           <div id="center_left"></div>
           <div id="center_middle">
           <form action="admin.jsp" οnsubmit="return login_yz()">
               <div id="user">
                   用户 <input type="text" id="uname" name="textfield" />
               </div>
               <div id="password">
                   密码 <input type="password" id="upwd" name="textfield2" />
               </div>

               <div id="yzm">
                   验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
                   <span id="syzm" οnclick="yz()"></span>
               </div>
               <div id="btn">
                   <input type="submit" value="登录">
                   <input type="reset" value="清空">
               </div>
           </form>
           </div>
           <div id="center_right"></div>
       </div>
       <div id="down">
           <div id="down_left">
               <div id="inf">
                   <span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
                       2008 v2.0</span>
               </div>
           </div>
           <div id="down_center"></div>
       </div>