Registration page records

Registration pages are essential for most websites, so it is necessary to carefully design your registration pages. My registration page is as follows:

 

1. Write a description for each input box

When users see this input box, they can clearly understand what the input box is for, and minimize the possibility of their doubts.

2. Small icon

In the past, pictures were used for small icons. If pictures were used, the alignment and width and height were very troublesome. This time, I made the icons into fonts, which is much easier to operate on the fonts than images. You can create an icon font on icomoon, a foreign website. However, this website is slow to open and requires patience.

These icons are all exported from the icomoon website. In this way, alignment is performed and the size is very convenient. However, IE6 and IE7 do not support the selector before (for browser compatibility of selector, refer to here). Therefore, this icon cannot be displayed in these two browsers.

<Font class = "ficomoon icon-signup"> </font> register a new user

@font-face {    font-family: ‘icomoon‘;    src:url(‘fonts/icomoon.eot?-fl11l‘);    src:url(‘fonts/icomoon.eot?#iefix-fl11l‘) format(‘embedded-opentype‘),        url(‘fonts/icomoon.woff?-fl11l‘) format(‘woff‘),        url(‘fonts/icomoon.ttf?-fl11l‘) format(‘truetype‘),        url(‘fonts/icomoon.svg?-fl11l#icomoon‘) format(‘svg‘);    font-weight: normal;    font-style: normal;}.ficomoon{font-family:‘icomoon‘;}.icon-print:before {content: "\e601"}

3. Number of characters that can be entered in the input box

With this setting, users can know the number of characters they can enter, which improves user friendliness. After some characters are entered, the system turns red, prompting the user to exceed the rated words.

function _textLimit(options, value) {        var length = value.length;        var color = options.normal;        var remind = options.len - length;        if(remind > 0 && remind <= options.limit) {            color = options.warnning;        }        if(remind < 0) {            var txt = $(‘#‘ + options.inputId);            txt.val(value.substr(0, options.len));            remind = 0;        }                $(‘#‘ + options.digitalId).html(remind).css({"color": color, "font-size": options.fontSize});    }

4. Feedback on input correctness and errors

When users enter the correct information, they should indicate it, give them a check mark, and encourage them to give them a difference when the input is incorrect, telling them that this is wrong, you need to modify it again. I use the icon font for the hook and difference here, which is especially convenient for alignment.

.ico_correct{color:#01b60e;margin-left:10px;font-family:‘icomoon‘;vertical-align:middle;font-size:1.25em}.ico_correct:before {content: "\f00c"}.ico_error{color:#ff0000;margin-left:10px;font-family:‘icomoon‘;vertical-align:middle;font-size:1.25em}.ico_error:before {content: "\f00d"}

5. Automatic email matching

Automatically display the mailbox suffixes such as @ 163.com to reduce user input and facilitate typing and reduce their errors. I found the relevant JS script code on the Internet and made a small modification myself to integrate it into my code.

Vi. Password strength

There are many plug-ins for password strength on the Internet, but this time I write CSS and then perform matching strength on my own to better integrate it into my website page. Show different color blocks and prompts for different intensity

RegEx. checkpwdstrong = function (STR) {// is the password strength strong var rule =/^ (? =. {8 ,})(? =. * [A-Z]) (? =. * [A-Z]) (? =. * [0-9]) (? =. * \ W ). * $/g; return rule. test (STR) ;}; RegEx. checkpwdmedium = function (STR) {// is the password strength moderate var rule =/^ (? =. {7 ,})(((? =. * [A-Z]) (? =. * [A-Z]) | ((? =. * [A-Z]) (? =. * [0-9]) | ((? =. * [A-Z]) (? =. * [0-9]). * $/g; return rule. test (STR) ;}; RegEx. checkpwdpoor = function (STR) {// is the password strength weak var rule = /(? =. {6,}). */g; return rule. Test (STR );};

.pwd_complex{padding:5px 0;height:15px}.pwd_complex span{height:6px;width:80px;margin-right:5px;display:inline-block;border:1px solid #c2c2c2;overflow:hidden}.pwd_complex .strong{border:1px solid #45ac07;background:#61cc1f}.pwd_complex .strong_word{color:#45ac07}.pwd_complex .medium{border:1px solid #45ac07;background:#9AF518}.pwd_complex .medium_word{color:#61cc1f}.pwd_complex .poor{border:1px solid #FF9C3A;background:#FFCA92}.pwd_complex .poor_word{color:#FF9C3A}

7. Control the Registration button

Here is a single region. When I select a single region, I can click the register button. When I do not select a region, I cannot click the register button. In this way, users are reminded to read the terms of service. Click the terms of service to bring up a layer that contains the agreement content. Here I just mean it.

8. Final verification

When I click the submit button, the JSJ script will be used for final verification to prevent the error message from being submitted to the server. If any input does not meet the requirements, there will be a little finger next to the input box, And the CSS 3 is moved back and forth. An active error prompt, I believe it will attract more attention from users and then make modifications. This animation controls the value of margin-left and moves back and forth.

.cssanimations .ico_prompt{    -moz-animation-duration: .7s;    -moz-animation-name: prompt_hand;    -moz-animation-iteration-count: infinite;    -moz-animation-direction: alternate;        -webkit-animation-duration: .7s;    -webkit-animation-name: prompt_hand;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: alternate;        -o-animation-duration: .7s;    -o-animation-name: prompt_hand;    -o-animation-iteration-count: infinite;    -o-animation-direction: alternate;        -ms-animation-duration: .7s;    -ms-animation-name: prompt_hand;    -ms-animation-iteration-count: infinite;    -ms-animation-direction: alternate;        animation-duration: .7s;    animation-name: prompt_hand;    animation-iteration-count: infinite;    animation-direction: alternate;}@keyframes prompt_hand {    from {margin-left:10px}    to {margin-left:2px}}@-moz-keyframes prompt_hand {    from {margin-left:10px}    to {margin-left:2px}}@-webkit-keyframes prompt_hand {   from {margin-left:10px}    to {margin-left:2px}}@-o-keyframes prompt_hand {    from {margin-left:10px}    to {margin-left:2px}@-ms-keyframes prompt_hand {    from {margin-left:10px}    to {margin-left:2px}}

9. prevent repeated submission

To prevent repeated submission by users, the button cannot be operated upon clicking the button. You must also be prompted that the user is performing the submission operation, and you need to wait. I used the plug-in spin to be compatible with various browsers. It is displayed before Ajax is submitted, and this wait layer is removed after Ajax response.

showAjaxLoading: function(btn) {            var left = $(btn).offset().left;            var top = $(btn).offset().top;            var width = $(btn).width();            var height = $(btn).height();            var opts = {                  lines: 9, // The number of lines to draw                  length: 0, // The length of each line                  width: 10, // The line thickness                  radius: 15, // The radius of the inner circle                  corners: 1, // Corner roundness (0..1)                  rotate: 0, // The rotation offset                  direction: 1, // 1: clockwise, -1: counterclockwise                  color: ‘#000‘, // #rgb or #rrggbb or array of colors                  speed: 1, // Rounds per second                  trail: 81, // Afterglow percentage                  shadow: false, // Whether to render a shadow                  hwaccel: false, // Whether to use hardware acceleration                  className: ‘spinner‘, // The CSS class to assign to the spinner                  zIndex: 2e9, // The z-index (defaults to 2000000000)                  top: ‘50%‘, // Top position relative to parent                  left: ‘50%‘ // Left position relative to parent            };            $(‘#ajax_spin‘).remove();            $(‘body‘).append(‘<div id="ajax_spin" style="position:absolute;background:#FFF;filter:alpha(opacity=30);opacity:0.3"><div id="ajax_spin_inner" style="position:relative;height:50px;"></div></div>‘);            $(‘#ajax_spin‘).css({‘top‘:top, ‘left‘: left, ‘width‘: width, ‘height‘:height});            var target = document.getElementById(‘ajax_spin_inner‘);              var spinner = new Spinner(opts).spin(target);        }

 

 

This registration page is a preliminary idea of mine, and will be continuously modified after new experiences are introduced.

One goal I want to achieve is that after entering this page, the user can easily complete various input boxes and complete the boxes smoothly and comfortably.

 

Demo can download http://download.csdn.net/download/loneleaf1/7684137 here

References:

Http://www.cnblogs.com/shenliang123/archive/2013/08/19/3267884.html jquery to achieve the function of automatic prompt mailbox Input
Verify password strength with http://www.cnblogs.com/tianyaxiang/archive/2012/01/31/2333270.html jquery
Http://zc.qq.com/chs/index.html QQ Registration
Http://icomoon.io online production icon
Https://github.com/aui/artDialog web page dialog box Components