利用JS实现简单的登录和注册页面

                        **js实现登录和注册**

这里是引用

登录模块的实现
 function login(){
     
            var userName=document.getElementById("userName").value.length;  
            var pwd=document.getElementById("pwd").value.length;
            if(userName==0){
               alert("用户名不能为空");
               return;
            }

            else{
                if(pwd==0){
                    alert("密码不能为空");
                }

            }
            
            window.alert("登录成功");
        }
        
        <div class="box3">
            <label><a href="#">密码登录</label></a>
            <label><a href="#">短信登录</label></a>
           <div class="box4"><input type="text" placeholder="会员名/邮箱/手机号" autofocus="autofocus" id="userName" ></div>
           <div class="box5"><input type="text" placeholder="请输入登录密码" autofocus="autofocus" id="pwd" ></div>
           <div class="box6"><input type="submit" value="登录" id="button" onclick="login()"></div>
        </div>

登录成功界面登录成功界面

  简易注册模块的实现
  function register(){
            var a=document.getElementById("phone");
            var b=document.getElementById("phoneerr");
            // var pattern=/^\w{3,}$/;
            if(phone.value.length==0){
                b.innerHTML="手机号不能为空";

            }

           else if(phone.value.length<=1){
                b.innerHTML="用户名不规范 至少三位";


            }
            else{
                b.innerHTML="手机号正确";
            }
        }
 <div class="box1">
                <div class="box2">手机号码 <input type="text" placeholder="请输入手机号码" id="phone"><span id="phoneerr"></span><br></div>
                <div class="box3">验证码&nbsp;&nbsp;&nbsp; <input type="text" placeholder="请输入效验码" id="yan"></div>
                <div class="box4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="同意协议并注册" onclick="register()"></div>
       
            </div>

注册成功界面


版权声明:本文为m0_57147195原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。