User registration page to talk about the happy kingdom

Saying: practice makes perfect. The same thing, do it once and do ten times, there are indeed very different, so they took two days to do this registration page for it, obviously be easy to use than the previous lot.

For example, before, after entry of the user name, it can not immediately interact with the server to detect whether a user name is occupied now by calling the function onblur event CheckUser (), which can immediately detect whether a user name is occupied.

For example, before, each user information input finished, if not immediately given the correct input prompt, now through this method, you can give tips.

For example before, if the verification code is incorrectly entered, then after the page is submitted, password and other information previously entered will be lost and need to re-fill the user, not used now, this code is entered incorrectly, that it wants to re-enter the verification code, dry Well do you want to re-enter the password, you say it. (Blog Park, I did not say you, do not pigeon-holing, hehe)

Of course, to achieve such ease of use, but worn out a lot of brain cells, in order to prevent more people making the same mistakes, there will be a sample URL and key code is posted for reference, comments.

After the page is certainly to be introduced jquery.validate, there is no doubt, refer to this plug-in, users at the time of submission, and when you enter, the legality of preliminary test input will be, surely we have this plug-familiar, and not say any more a.

Furthermore, it is to use the onblur event, fill out the information after each line is completed, the triggering event, and give tips for relevant information, such as user name is occupied, password strength is adequate, and so on, these things can not be completed jquery.validate also One thing is that the bank information detected by the right to be given prompt, encourage further user action, this jquery.validate plug-in is not possible, we can use this event to the page controls the assignment, the sample code below.

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='' />Abnormality detecting the same name, please try again " 
    }
        }););

The most critical, check the verification code is a problem, if the page is submitted to the ordinary background, it is because of the particularity Password control, the value of input from backstage before return to the page, the value of password controls must be cleared specific see the blog Park registration page. And in the process returned, there are other problems, such as missing before the authentication prompt, refresh the page and so on.

I have here is so resolved.

In the event page to submit by Ajax of course get verification value code, such as the value of the input box, if correct, the next step, if error, give tips, cut pages continue to be submitted.

And let not the default page submission, check to make sure the verification code is correct.

Key Code 1: onsubmit = "return false;" 

The key code 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 ( "registered successfully!" ); 
                            Window.location.href = "/" ; 
                        } 
                    }, "text" ); 
                } 
            }, 
            error: function (the XMLHttpRequest, textStatus, errorThrown) { 
                Alert ( "registered exceptions, try again later "! ); 
            } 
        });        
    }

At this point, a modicum of success personally think the registration page, thus completed, of course, these pages not too perfect, if someone has a better solution, please let us know, a lot of guidance.

Finally, give example URL: http://www.kxwg.net/User/Register

 

This site is a newly developed personal aim is to share the joy of everyone in the hands of pictures and wonderful statement, also please a lot of participation, independence Lele, Lele is not public, you say it.

The site is called "Happy Kingdom" Well, if you feel good, please share it with your family and friends, here thanked.

 

 

Reproduced in: https: //www.cnblogs.com/ushou/archive/2013/03/04/2941118.html