Complete information on the php user registration page (with source code) _ php instance

This article mainly introduces an example of a php user registration page with complete information, including automatic email matching, password strength verification, and form duplication prevention, we recommend it to you. Registration pages are essential for most websites, so it is necessary to carefully design your registration pages. The following three figures show the registration page, the second Mind Map shows a simple logic, and the third is to view the called JS file through firebug.

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. We need to assume that users do not know what to enter for registration, and then give them enough information to help them understand.

2. Small icon

Icon is a tool for enhancing content and can give a good hint to the visitor. 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. Using online resources to accept new ideas and technologies makes work easier and easier.

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.

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

In the past, I used to set a limit on the maximum number of words in the input box. This is a rough method, because after a certain character is entered, it suddenly cannot be entered, it feels like the keyboard suddenly fails and there is no indication.

Now, with this setting, we can first let the user know that there is a limit on the number of words, and then let the user know when the limit will be reached, which improves friendliness. Another small operation is also done here, that is, after some characters are entered, the red will appear, and the warning user will soon exceed the rated words.

This is a concept of poka-yoke, which means to prevent errors and has two meanings:Detection and prevention mechanisms.

By adding a simple character counter, you can turn a potential error into another instant where "the original use of this product requires only common sense.

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

In addition to displaying friendly prompt information immediately when an error is detected, it is also important to tell the user that "everything is okay.

Imagine that when you are eager to ask someone for some information, you certainly want to get a response immediately.

When users enter the correct information, they should indicate it, give them a green check, and encourage them. When the input is incorrect, give them a red difference, tell them the reason for the error and ask them to make corresponding changes. I use the icon font for the check 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

This automated mailbox matching can reduce user input errors and improve user input efficiency. Let the user "Do the right thing ". The red color in the drop-down list highlights the differences between the matching value and the input value for easy identification.

I found the relevant JS script code on the Internet and made a small modification myself to integrate it into my code. Here, I also share an article about the ultra-complete automatic mailbox matching: jquery realizes the mailbox auto-filling prompt function.

Vi. Password strength

The password strength test aims to provide a kind reminder to the user, hoping that the user can have a stronger protection mentality for his/her information. Therefore, data submission should not be affected even if the password is weak. Different prompts are displayed below the three levels, prompting you to increase the password strength, or encouraging you to increase the password strength or affirm the strength of the password.

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. Different color blocks and prompts are displayed 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}

Here, I would like to share with you an article on ultra-complete email password Strength Verification: jquery verification code for determining password strength.

7. Control the Registration button

The selected or unselected button is a different effect, that is, the register button will be hidden when it is not selected, but it is not appropriate in the future. If the user accidentally cancels the selected box, the button suddenly disappears, causing users to be confused. It is possible that they will terminate registration or refresh the page and re-enter the corresponding content. No matter what operation they do, it will make users feel unhappy.

Later, I thought of changing the button to gray. The disabled input in html is displayed in gray by default, which makes use of some of the user's habits. Let the button exist on the page, suggesting that the user still has not completed the operation, but here you can actually add some tips to clarify where it is not done, I am lazy and did not do that kind of prompt.

Under the terms of service, I marked it with a dotted line and displayed the hand icon when I moved it up. It implies that the user can click here and click the terms of service to bring up a content layer, which contains the agreement content, I didn't remind you to open a new page. In this case, I think the user's attention should be focused on the current page instead of opening a new window and then browsing the information there, it disperses his attention, and opens a new window browser and adds more labels, which occupy the place.

8. Final verification

When I click the submit button, the JS 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 hand positioned next to the wrong input box, And the animation effect is moved back and forth. An active error prompt, I believe it will attract the attention of users and make corresponding modifications. Here we use the new CSS3 technology, and have been trying to apply some things we have learned to actual operations. Here we just made a try. The animation prompt is still rough, but it gave me a new idea. The only thing that gets complicated is that the CSS code is too large.

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. Button tag

The text in the button can be written as a normal "Submit" and work properly. However, the more obvious button tag can help you better set your desired click results, so that you can clearly understand what results I have clicked here.

10. prevent repeated submission restrictions

Finally, after the user clicks submit, I will see a rotating circle, indicating that the user system is submitting. Please be patient and prevent the user from submitting the server repeatedly. Generally, experienced users will realize that they are submitting this circle, but they can do better for inexperienced users. I just made a special effect on the sphere layer. In fact, the words "register now" can be changed to "register for submission" after clicking it, this gives users a clearer picture of what is happening now.

To achieve this, 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('
'); $('#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.

The above steps may not be the best solution in some cases, so the most appropriate modifications are made in actual situations. There is no best, only better.

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.

Source code: php user registration page complete instance information

The above is all the content of this article, hoping to help you learn.