(JS)利用String对象的属性和方法实现注册和登录功能,要求用户名长度在3-10范围内,密码在6-20位

标签: js

**

题目: 利用String对象的属性和方法实现注册和登录功能,要求用户名长度在3-10范围内,密码在6-20位。

思路:做一个简单的登陆注册,不需要太复杂!
在一个总函数里调用两个函数,用switch功能实现,分别对于登录和注册两个功能。再处理一点细节就ok咯。代码还不够完善,懒得再写了,就这样趴。

<!DOCTYPE html >
<html>
<head>
</head>

<body>
<al>
  <ul>
    <center><p> 用户名:
      <input id="a" type="text" value="用户名长度在3-10范围内">
    </p>
    <p>密码:
      <input id="b" type="text" value="密码在6-20位">
    </p>
    <input id="c" type="button" value="注册" onClick="fun(1)">
    <input id="d" type="button" value="登录" onClick="fun(2)">
        </center>
  </ul>
</al>
<script>
   var a=new String("111")
   var b =new String("222")
   var c,i,j
   
   
    function fun(c){  
          a =  document.getElementById("a").value//获取文本框的值
          b =  document.getElementById("b").value
       
   switch(c){
            case 1:zhuce()//用于获取判断输入值,注册部分
                i=a
                j =b
                break
            case 2:denglu()//用于验证与注册是否一致,登录部分
                break
        }

        
        function zhuce(){//用于获取判断输入值,注册部分
           
            if (Boolean(a) && Boolean(b)){  //如果两个字符不为空
                if(a.length>=3 && a.length<=10 ){ //判断用户名输入   
                    if (b.length>=6 && b.length<=20){
                            alert("注册成功!")
                      
                    }
                    else{
                        alert("密码输入错误!")
                    }
                }
                else{
                    alert("用户名输入错误!")
                }
            }
            else{
                alert("输入错误!请重新输入用户名和密码!")
            }
        }
        
        
        function denglu(){  //用于验证与注册是否一致,登录部分
          
            a =  document.getElementById("a").value
          b =  document.getElementById("b").value
        if (a==i){
            if(b==j){
                alert("登录成功!")
            }
            else{
                alert("登录失败!")
            }
        }
         else{
            alert("登录失败!")
        }
        
      
    }
       
    }
   
</script>
</body>
</html>

运行结果如图:
在这里插入图片描述
在这里插入图片描述

版权声明:本文为weixin_44797539原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44797539/article/details/106186313