1.1简单介绍

登录验证是每个网站和系统必不可少的功能,而针对登录验证的方式有很多，现在将我做的登录验证的效果及代码思路写出来给大家参考。

1.2效果图展示

image.png

image.png

image.png

1.3HTML结构布局

<style type="text/css">
            #myInput::-webkit-input-placeholder {
                color: red;
            }
            
            #myInput:-moz-placeholder {
                color: red;
            }
            
            #myInput:-ms-input-placeholder {
                color: red;
            }
        </style>
        <div class="loginbody">
            <span class="systemlogo">XXXXXXX系统标题</span>
            <div class="loginbox">
                <form id="loginform"  action="/api/user/findUser">
                    <ul>
                        <li style="margin-bottom:5px;font-size:16px;color:red;text-left;"></li>
                        <li><input class="loginuser" id="userAcound" name="userAcound" value=""  type="text" placeholder="请输入用户名" /></li>
                        <li><input class="loginpwd"  id="userPwd"  name="userPwd" value="" type="password" placeholder="请输入密码" /></li>
                        <li>
                            <button id="loginbtn" type="button" class="loginbtn" style="width:97px">登录</button>
                            <label><input id="login_cbx" name="flag" type="checkbox"   value="ok"  />记住密码</label><label><a href="#">忘记密码？</a></label>
                        </li>
                    </ul>
                </form>
            </div>
        </div>

1.4JS验证实现代码

        <!-- 底部加载js文件 -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            var isBoolean = false;
            $('#loginbtn').click(function() {
                //判断用户不能为空
                if($("input[name='userAcound']").val()!=""){
                    isBoolean=true;
                }else {
                        //jQuery的attr获取placeholder属性值并改变
                    $(".loginuser").attr('placeholder', '请输入用户名').attr("id", "myInput"); 
                    $(".loginuser").focus();
                    isBoolean=false;
                }
                //判断用户不能为空
                if($("input[name='userPwd']").val()!=""){
                    isBoolean=true;
                }else {
                      //jQuery的attr获取placeholder属性值并改变
                    $(".loginpwd").attr('placeholder', '请输入密码').attr("id", "myInput");
                    $(".loginpwd").focus(); //取得当前文本框的焦点
                    isBoolean=false;
                }
                //提交数据
                if(isBoolean == true){
                    document.getElementById("loginform").submit(); //验证通过后提交
                }
            });
        </script>