1.1简单介绍

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

1.2效果图展示

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

 
本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！