现在的位置: 首页 > 综合 > 正文

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

2013年02月19日 ⁄ 综合 ⁄ 共 2396字 ⁄ 字号 评论关闭

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

比如说之前,填写了用户名之后,不能马上与服务器交互,检测用户名是否被占用,现在通过事件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("注册异常,请稍后再试!");
            }
        });       
    }

至此,一个个人认为小有成就的注册页面,就此完成,当然些页面也不算完美,若是有人有更好的解决办法,还请不吝赐教,多多指导。

最后给与示例网址:http://www.kxwg.net/User/Register

 

这个网站是个人新开发的,目的是共享每个人手中的欢乐图片及精彩语句,也请各位多多参与,独乐乐,不是众乐乐,您说是吧。

这个网站叫《开心王国》哦,如果觉得还不错,请分享给您的家人和朋友,在此谢过了。

 

 

抱歉!评论已关闭.