摘要：登录注册模块是涉及到用户的项目开发中不可缺少的部分，此文归纳在实际项目开发中登录注册模块的一些思路和通用代码块，当然也有其不足之处，望各位多多指教。

登录和注册模块是非常相似的，可能唯一不同的地方是在注册的时候需要校验手机或者邮箱的验证码，看具体的项目而定。

一、登录模块：

相比较而言，登录还是比较简单，一般就是账号、密码、验证码三项信息，点击按钮提交登录，当然，在这里就不讨论高大上第三方验证方式，比如：滑动验证、文字验证等。

理一理逻辑：默认载入显示验证码图片，点击提交按钮首先表单校验，校验成功提交登录防止用户多次提交先禁用按钮，登录成功跳转页面，登录失败刷新验证码图片登录按钮正常可操作，点击验证图片切换验证图；监听回车按钮登录。

1.因为验证图功能多次使用，所以封装通用方法。

1
2
3
4
5
6
7
8
9
//全局codehash用户后面登录校验  
var codehash;
getImage();
function getImage() {
    $.post("/api/Account/ValidateCode", function (json) {
        $(".yanzhengtu").attr("src", json.fileurl);
        codehash = json.codehash;
    })
}

2.点击登录和后续操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$("#Login").on("click",function () {
    if ($("#username").val() == "") {
        $(".tisi").html("请输入用户名！");
    } else if ($("#password").val() == "") {
        $(".tisi").html("请输入密码！");
    }else if ($("#code").val() == "") {
        $(".tisi").html("请输入验证码！");
    }
    else {
        var data = {
            username: $("#username").val(),
            userpass: $("#password").val(),
            code: $("#code").val(),
            codehash: codehash
        };

        $("#Login").text("登录中..").css({ "color": "#cccccc" }).attr("disabled", "disabled");
        $.ajax({
            type: "POST",
            url: "/api/Account/Login",
            data: data,
            contentType: 'application/x-www-form-urlencoded',
            success: function (json) {
                if (json.code == 1) {
                    //登录成功 跳转后台界面
                    location.href = "...";
                } else {
                    getImage();
                    $(".tisi").html(json.data);
                    $("#Login").text("登　录").css({ "color": "#444" }).removeAttr("disabled");
                }
            }
        });

    }
})

3.点击图片切换验证图

1
2
3
4
// 切换验证图片 封装好方法直接调用
$(".yanzhengtu").on("click", function () {
    getImage();
});

4.监听Enter按钮登录

1
2
3
4
5
6
document.onkeydown = function(event){
  var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 13) { // enter 键
        $("#Login").click();
    }
}

二、注册模块 ：

注册模块没有图形验证码，但是需要发送短信验证码或者邮箱验证码，点击提交按钮校验完之后再提交注册信息，我们可以对必要的input做事先校验（失去焦点后校验）。

1.发送验证信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var flag = true;
$("#inputGetVerify").on("click", function () {
    $("#inputTel").blur();   //失去焦点后校验
    if (inputTelStatus == 1) {
        if (flag) {
            flag = false;
            $(this).css({
                "background": "#999999"
            });
            var timer,wait = 60;
            function time() {
                if (wait == 0) {
                    $("#inputGetVerify").css({
                        "background": "#fff"
                    });
                    $("#inputGetVerify").text("获取验证码");
                    wait = 60;
                    flag = true;
                } else {
                    $("#inputGetVerify").text("重新发送(" + wait + ")");
                    wait--;
                    timer = setTimeout(function () {
                        time();
                    },
                    1000);
                }
            }
            time();
            $.post("/api/Account/RegSendSms", { phone: $.trim($("#inputTel").val()) }, function (json) {
                if (json.code != 1) {
                    $("#inputGetVerify").css("background", "#fff").text("获取验证码");
                    clearTimeout(timer);
                    flag = true;
                    $(".tisi").html(json.data);
                }
            });
        } else {
            return;
        }
    } else {
        return;
    }
});

2.事先失去焦点后校验 ：

1
2
3
4
5
6
7
8
9
var inputTelStatus = 0;  //全局使用 是否校验通过
$("#inputTel").blur(function(){
  if((/^[1-9]\d*$/.test($("#inputTel").val()))){		
      inputTelStatus = 1;
  } else {
      inputTelStatus = 0;
    $(".tisi").html("请输入正确的手机号码！");
  }
});

3.提交注册和Enter监听和登录模块如出一辙，这里就不赘述了。