HTML注册及登录系统

最新推荐文章于 2024-06-16 23:02:16 发布

All_thebest

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量3.8k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/All_thebest/article/details/123896502

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <script src="js/jquery-1.12.4.js"></script>

   </head>
   <body>

       用户名：<input id="uname" name="username"/>
       密码：<input id="pwd" name="password"/>
       <button οnclick="zhuCe()">立即注册</button>

       <script>

           var usernames = ["xiaolili","diaocan"];
           var pwds = ["111111","222222"];

           //校验用户输入的内容
           function zhuCe(){
               //获取用户输入的内容
               var unam = document.getElementById("uname").value;
               var pw = document.getElementById("pwd").value;
               var first = unam.charAt(0)+"";
               var num = "ABCDEFGHJKLMNOPQRSTUVWXYZ";
               var index = num.indexOf(first);

               console.log(unam)
               console.log(pw)
               console.log(index)
               console.log(unam.length)
               console.log(pw.length)

               if(unam.length >= 6 && unam.length <= 12 && index >= 0 && pw.length >=6 && pw.length <= 12){
                   alert("注册成功");
                   window.location = "http://127.0.0.1:8020/jinritoutiao/3.21%E4%BD%9C%E4%B8%9Aagain2.html?unam="+unam+"&pw=pw"
               }else{
                   alert("注册失败");
               }

           }



       </script>

   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>

       用户名：<input name="username" id="username" /><br/>
           密码：<input name="pwd" id="pwd" /><br/>
           <input type="button" οnclick="login()" value="登录" />

       <script type="text/javascript">

           var usernames = ["xiaolili","diaocan"];
           var pwds = ["111111","222222"];


           //用户注册成功了之后才会到页面，
//           http://127.0.0.1:8020/toutiao/login.html?username=Lilili&pwd=qqqqqq
           var url = window.location.href;
           var arr = url.split("?");//[http://127.0.0.1:8020/toutiao/login.html,username=Lilili&pwd=qqqqqq]
           var nameAndPwd = arr[1].split("&");// [username=lilil,pwd=qqqq]
           var names = nameAndPwd[0].split("=");// [username,lililili]
           usernames.push(names[1]);
           //获取用户传递过来的用户名和密码
           //使用String的方法可以实现

           //将用户名和密码存储到数组
           var pwd = nameAndPwd[1].split("=");// [pwd,qqqq]
           pwds.push(pwd[1]);

           console.log(usernames)
           console.log(pwds)


           //当用户点击登录的时候，触发点击事件，方法登录方法，
           function login(){
               //用户输入用户名和密码进行登录,
               //在方法中获取用户输入的内容
               var myName = document.getElementById("username").value;
               var myPwd = document.getElementById("pwd").value;
               var index = -1;
               for (var i = 0; i < usernames.length; i++) {
                   if(usernames[i] == myName){
                       index = i;
                       break;
                   }
               }
               if(index == -1){
                   alert("用户名或者密码错误，登录失败")
               }else{

                   if(pwds[index] == myPwd){
                       alert("登录成功")
                   }else{
                       alert("登录失败")
                   }

               }





           //循环用户名数组，查看数组中是否存储用户输入的内容，如果存在，则记下他的下标

           //根据下标获取密码，比较用户输入的密码和数组中的密码，如果一致则登录成功，不一致则失败


           }



       </script>