登录表单弹出是早就做好了，不过一直没有放出来，因为还有两个步骤没走。一是表单input的验证，二是submit的验证。
你会说又不是评论之类的表单，有什么好验证的？？登录表单有html5验证，只要不为空基本不用验证什么。
话说回来，自从7月底被某个缺德的家伙直接拿我的侧栏登录小工具来试密码之后心里就一直不爽。虽然这个掉节操的人没有成功，但每次看到登录错误的邮件都想整治一下这样的人，所以我想到了表单验证。上面两步是必需的，往后看看要不要加登录验证码。目前的情况来看，已经好久没有机器人爆破这类的事件发生了，把该封的POST入口都做了改变，呵呵。
下面就说说这两大方法，应该说是思路更准确：

load方法调用表单

这个太简单了，方法有很多，你可以先隐藏表单然后用hover伪类这样的纯CSS搞定，这样的好处是避免点击事件而不需要js控制，只需要加一点css即可，绿色环保。我的方法是将表单单独写成一个login.php文件放在主题目录下，然后使用load方法调用。

$(function() {
    $('.denglu').click(function(){
        $('.login_inloub').fadeIn(300);
        $('.login_mask').fadeIn(300);
        $('.login_inloub').load('/wp-content/themes/inloub/login.php'); 
    });
    $('.login_mask').click(function(){        
        $('.login_inloub').fadeOut(300);
        $('.login_mask').fadeOut(300);
    });
});

点击空白处关闭

点击事件弹出div，那么关闭又成了难题，如果使用关闭按钮还比较简单，而若要点击表单周围空白部分实现关闭就有些困难了。我想了一个最笨的方法：表单之下添加一个蒙板，蒙板透明，点击蒙板时 表单连同蒙板本身一起关闭，上面的代码中.login_inloub是表单div；.login_mask则是蒙板div，淡入淡出对应了相应的点击事件。那么剩下的就是CSS而已了：

.login_inloub{z-index:9999;position:fixed;top:50%;left:50%;width:460px;height:320px;margin:-180px 0 0 -230px;border-radius:5px;border:solid 2px #666;background-color:#fff;display:none;box-shadow:0 0 10px #666}
.login_mask{z-index:999;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#111;opacity:0.5;display:none;}

到此表单弹出部分就OK了。

验证什么？为了防止一些完全没节操的小人不断手动尝试你的用户名和密码进行登录，必须要进行一定的验证。在验证通过前，数据不用POST到wp-login.php（当然哥的wp-login.php已经改名了），验证的内容是什么？看你的思路，比如用户名类型（得用正则表达式），密码长度，诱导性的提示 等等。具体代码自然不会在此公开，下面提供验证的基本框架。

$(function() {
    // 表单失去焦点时才执行两个checkXxx函数
    $("input[name=log]").blur(function(){checkUsername();});
    $("input[name=pwd]").blur(function(){checkPwd();});
    // 点击提交验证
    $(".btn").click(function(e) { // .btn为提交按钮的class
        if(checkUsername() == false || checkPwd() == false){
            e.preventDefault(); // 若不满足条件，则阻止提交点击事件
            // 你还可以弹出警告...
        }
    });
});
function checkUsername(){
    // 这里做验证思路的判断
}
function checkPwd(){
    // 这里做验证思路的判断
}

上面包含了用户名和密码的验证，重要是提交按钮的e.preventDefault()，不知道为什么放在form标签的onsubmit没有起作用，所以只要用js来进行提交判断。到此，本文全部结束。效果自己在本站首页查看吧。