谈谈开心王国的用户注册页面

2年前 (2022) 程序员胖胖胖虎阿

155 0 0

话说：熟能生巧。同一件事情，做一次，和做十次，的确是有很大不同，就拿这两天做的这个注册页面来说吧，明显比之前的要好用很多。

比如说之前，填写了用户名之后，不能马上与服务器交互，检测用户名是否被占用，现在通过事件onblur调用函数CheckUser()，从而可以马上检测出用户名是否被占用。

比如说之前，用户每一个信息输入完，不能马上给出是否输入正确的提示，现在也通过这个方法，可以给与提示。

比如说之前，如果验证码输入的不正确，那么页面提交之后，之前输入的密码等信息会丢失，需要用户重新填写，现在不用了，验证码输入不正确，那重新填写验证码就是了，干嘛要重新填写密码呢，你说是吧。（博客园，我没说你呀，别对号入座，嘿嘿）

当然，要实现这么的易用，可是累死了不少脑细胞，为了不让更多人重蹈覆辙，这里将示例网址及关键代码贴出来，供大家参考，点评。

页面肯定是要引入jquery.validate，这里毋庸置疑，引用这个插件后，用户在提交时，以及在输入时，会初步检测输入的合法性，这个插件想必大家已经很熟了，就不再多说了。

再者就是使用onblur事件，每一行信息填写完成后，就触发该事件，并针对相关信息给出提示，比如用户名是否占用，密码强度是否足够等等，这些jquery.validate无法完成的事情，还有一点，就是该行信息检测通过后要给出正确提示，鼓励用户进一步操作，这点jquery.validate插件也是无法实现，我们可以通过这个事件，给页面控件赋值，示例代码如下。

View Code

    function CheckUser() {
        var username = $('#UserName').attr("value");
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/User/CheckUserIsExist?u=" + username + "&r=" + Math.random(),
            data: "{}",
            dataType: 'json',
            success: function (result) {
                if (result != null) {
                    if (result.Userid > 0) {
                        $('#UserNameMsg').html("<img src='/Content/Images/error.png' alt='' />用户名重复");
                    }
                    else {
                        if (username.length > 0) {
                            $('#UserNameMsg').html("<img src='/Content/Images/ok.png' alt='' />用户名可以注册");
                        }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('#UserNameMsg').html("<img src='/Content/Images/error.png' alt='' />检测重名异常，请重试");
            }
        });
    }

而最关键的，校验验证码则是一个难题，如果采用普通的页面提交到后台，那因为Password控件的特殊性，从后台返回之前输入的值到页面上时，密码控件的值必定清零，具体请见博客园注册页面。并且在返回的过程中，还有其他一些问题，比如之前的验证提示丢失，页面刷新等等问题。

我这里是这么解决的。

在页面提交事件中，通过Ajax获取当然验证码的值，与输入框的值比如，如果正确，进行下一步，如果错误，给与提示，截断页面继续提交。

而让页面默认不提交，先检测验证码是否是正确。

关键代码1：onsubmit = "return false;"

关键代码2：

View Code

    function formSubmit() {
        var validateCode = $('#ValidateCode').attr("value");
        if (validateCode == "") {
            return;
        }
        $.ajax({
            type: "POST",
            url: "/User/GetValidateCode?r=" + Math.random(),
            data: {
                code: validateCode
            }, //要发送的数据
            dataType: 'text',
            success: function (result) {
                debugger;
                if (validateCode != result) {
                    alert("输入验证码不正确，请重新输入！");
                    $('#ValidateCode').attr("value", "");
                }
                else {
                    var userName = $('#UserName').attr("value");
                    var passWord = $('#PassWord').attr("value");
                    var safeMail = $('#SafeMail').attr("value");
                    $.post("/User/Register", { userName: userName, passWord: passWord, safeMail: safeMail }, function (txt) {
                        if (txt != "OK") {
                            alert("注册成功！");
                            window.location.href = "/";
                        }
                    }, "text");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("注册异常，请稍后再试！");
            }
        });       
    }