前端登录表单验证

WoeN.May.11

已于 2022-03-26 16:55:01 修改

阅读量1.2k

点赞数

文章标签：前端

于 2022-03-26 16:50:52 首次发布

本文链接：https://blog.csdn.net/weixin_60786293/article/details/123758961

版权

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

</div>
</body>
</html>

WoeN.May.11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端登录表单验证

<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 = ...
复制链接

扫一扫