Example of ajax registration information without refreshing verification, ajax Registration Information

Example of ajax registration information without refreshing verification, ajax Registration Information

The following is an example of registration information verification without refreshing ajax:
1. Complete the registered html page (html + css)
1. Directly wrap the form with a div without a form
2. Four tags are required to display correct and incorrect information.
3. Use the button directly without the submit button.

2. Make ajax a function and exchange data with the server by passing simple parameters.

1. This ajax function is described in detail in the previous article on how to process returned data using ajax.
2. the ajax function requires three parameters: url, jsonData, and getMsg. The URLs here are all regProcess. php, jsonData is the data to be uploaded to the server for verification, and getMsg is the function to obtain the returned data.
3. Repeat Step 2nd to verify the four Information items.

3. Create a regProcess. php file to process registration information

1. This is to process the data transmitted by ajax. Note that the sending method is POST, so the receiving method is also POST.
2. After receiving all the data, verify and judge the data. The most important thing is whether data can be received successfully. Never Receive error data.
Note that some special characters are incorrectly displayed when they are uploaded to the server. For example, '+' is displayed as ''space. Please search for details. therefore, if the server receives special characters, it must be encoded before they can be correctly used. php uses the urlencode function for url encoding.

4. Compile the required functions into a function and put them in another myFunc. php file, and then import the regProcess. php file for direct use.

1. Verify that the user name is illegal and has been registered
2. Verify that the password is invalid and the strength is high.
3. Verify that the password is consistent
4. verify whether the email address is illegal and has been registered
5. Save User information to the database
Then, use these functions in regProcess. php to directly process the returned error code.

5. Return the processed data. Here I return the string in json format, and then parse it in JS.

1. The returned data must be spliced into json format.
Json format: {name1: value1, name2: value2 };
However, we actually want to return a string, so we should '{"name1": "value1", "name2": "value2 "}';
2. Return to the front end and parse it into a json object using JS eval function.
For example, var json = eval ('+ oAjax. responseText + ')');
3. display the verification information behind the corresponding input.
4. Click "register" to submit all data at a time. If there is no error, keep the registered user information and prompt that the registration is successful.

Successful registration results include:

 

The database also updated the newly registered information.

Registration failure results include:

The following is the main code:

Html code

<Div id = "reg"> <label> User Name: <input type = "text" id = "username"/> </label> <br/> <label> password: <input type = "password" id = "passw"/> </label> <br/> <label> confirm the password: <input type = "password" id = "repassw"/> </label> <br/> <label> Email: <input type = "text" id = "email"/> </label> <br/> <button id = "btn"> register </button> <span id = "user"> </span> <span id = "pass"> </span> <span id = "rep"> </span> <span id =" em "> </span> </div>

Css code

#reg{width:400px;height: 300px;position: relative;margin:10px auto}  #reg label{float:right;position: relative;margin-top: 10px;font-size: 28px;}  #reg label input{width:250px;height: 40px;font-size: 24px;}  #reg #btn{width:120px;height: 40px;position: absolute;right: 65px;margin-top: 80px;}  #reg span{width:200px;position: absolute;right: -210px;font-size: 24px;}  #reg #user{top:20px;}  #reg #pass{top:75px;}  #reg #rep{top:130px;}  #reg #em{top:185px;}  .error{color:red;}  .ok{color:greenyellow;}

Js Code

<Script src = ".. /.. /.. /ajax. js "> </script> <script> window. onload = function () {// check bgProcess () in the background; // submit the registration information and return whether the registration is successful or not $ ('btn '). onclick = function () {var jsonData = {username: $ ('username '). value, passw: $ ('passw '). value, repassw: $ ('repassw '). value, email: $ ('email '). value}; ajax ('regproccess. php', jsonData, getInfo, 'json') ;}; function getInfo (info) {var a = ['username', 'passw ', 'repassw ', 'email ']; var B = ['user', 'pass', 'rep ', 'em']; var flag = true; for (var I = 0; I <info. length; I ++) {if (info [I]. state = 'false') {flag = false; displayInfo (info [I], B [I], a [I]); // Display error message }}if (flag) alert ('Congratulations, you registered successfully') ;}}; // backend verification function bgProcess () {// verify username $ ('username '). onblur = function () {var jsonData = {username: this. value}; ajax ('regproccess. php', jsonData, getUser, 'json') ;}; function getUser (msg) {displa YInfo (msg [0], 'user', 'username');} // verify the password $ ('passw '). onkeyup = $ ('passw '). onblur = function () {var jsonData = {passw: this. value}; ajax ('regproccess. php', jsonData, getPass, 'json');}; function getPass (msg) {displayInfo (msg [1], 'pass', 'passw ');} // confirm the password $ ('repassw '). onblur = function () {var jsonData = {passw: $ ('passw '). value, repassw: this. value}; ajax ('regproccess. php', jsonData, getRepass, 'json ');}; Function getRepass (msg) {displayInfo (msg [2], 'rep ', 'repassw');} // verify email $ ('email '). onblur = function () {var jsonData = {email: this. value}; ajax ('regproccess. php', jsonData, getEmail, 'json');}; function getEmail (msg) {displayInfo (msg [3], 'em ', 'email ');}} // display information function displayInfo (msg, id, name) {$ (id ). className = (msg. state = 'true ')? 'OK': 'error'; $ (id). innerHTML = msg [name];} function $ (id) {return document. getElementById (id);} </script>

MyFunc. php code:

<? Php/*** @ function verification username * @ param $ username * @ return returns a $ res array containing the error code. 1: the username is invalid. 1: no user name is entered. 1: the user name exists */function verifyUser ($ username) {$ res = array (); // The number of successful matches is returned. 0 indicates no matches are returned, match letters, numbers, and underscores if (preg_match ("/^ \ w {6, 16} $/", $ username) = 0) $ res [] = 1; else $ res [] = 0; if (empty ($ username) $ res [] = 1; else $ res [] = 0; if (verifyData ($ username, 'username') // verify whether the user name is registered $ res [] = 1; else $ res [] = 0; return $ re S;}/*** @ function verify whether the password is illegal and the password strength * @ param $ passw password * @ return $ res password strength */function verifyPassw ($ passw) {$ reg1 = '/^ [0-9] {8, 16} $ /'; // pure number $ reg2 = '/^ [a-zA-Z] {8, 16} $ /'; // pure letter $ reg3 = '/^ [a-zA-Z \ +] {8, 16} $ /'; // pure letters + $ reg4 = '/^ [0-9a-zA-Z] {8, 16} $ /'; // number and letter combination $ reg5 = '/^ [0-9a-zA-Z \ +] {8, 16} $/'; // number, '+', and letter combination $ res; if (empty ($ passw) $ res =-1; else if (preg_match ($ reg1, $ passw) $ res = 1; else if (preg_match ($ r Eg2, $ passw) $ res = 1; else if (preg_match ($ reg3, $ passw) $ res = 2; else if (preg_match ($ reg4, $ passw )) $ res = 2; else if (preg_match ($ reg5, $ passw) $ res = 3; else $ res = 0; // return $ res ;} /*** @ function: verify whether the email address is illegal and has been registered. * @ param $ email * @ return $ res error code */function verifyEmail ($ email) {$ reg = '/^ ([\ w -*\. *]) + @ (\ w -?) + (\. \ W {2 ,}) + $/'; $ res; if (empty ($ email) $ res =-1; else if (verifyData ($ email, 'mailbox ') $ res = 1; else if (preg_match ($ reg, $ email) $ res = 2; else $ res = 0; // invalid email return $ res;}/*** @ function verify whether data already exists * @ param $ data * @ param $ query * @ return data returns 1, otherwise 0 */function verifyData ($ data, $ query) {// 1. connect to the Database @ $ db = new MySQLi ('localhost', 'root', 'root', 'user _ passd'); if (mysqli_connect_errno () die ("connect data Library failed "); // 2. check whether the data exists $ SQL = "select $ query from login where $ query = '{$ data}'"; $ res = $ db-> query ($ SQL ); $ row = $ res-> fetch_assoc (); // 3. close database $ db-> close (); return is_null ($ row )? ;}/*** @ Function saves the registered user information * @ param $ data the data to be saved. An array * @ return bool $ res returns true, indicating that the information is saved successfully, false indicates failure */function saveRegInfo ($ data) {// 1. connect to the Database @ $ db = new MySQLi ('localhost', 'root', 'root', 'user _ passd'); if (mysqli_connect_errno ()) die ("failed to connect to the Database"); // 2. insert data $ SQL = "insert into login values ('{$ data [0]}', '{$ data [1]}', '{$ data [2]}') "; $ res = $ db-> query ($ SQL); // 3. close database $ db-> close (); return $ res ;}

RegProcess. php code

<? Phpheader ("Content-Type: text/html; charset = UTF-8"); // disable caching to ensure normal data submission, instead of caching data headers ("Cache-Control: no-cache"); include ('myfunc. php '); // contains my function library $ username = isset ($ _ POST ['username'])? $ _ POST ['username']: ''; // obtain the username $ passw = isset ($ _ POST ['passw '])? Urlencode ($ _ POST ['passw ']): ''; // get password $ repassw = isset ($ _ POST ['repassw'])? Urlencode ($ _ POST ['repassw ']): ''; // get the confirmation password $ email = isset ($ _ POST ['email'])? $ _ POST ['email ']: ''; // obtain the email address $ info =' ['; // store the data on the returned page $ isSucceed = 0; // determine whether the registration is successful. If the final result is 4, it means all are correct. The registration is successful. // 1. verify that the user name is invalid $ res1 = verifyUser ($ username); if ($ res1 [1]) $ info. = '{"username": "Enter the user name", "state": "false"}'; else if ($ res1 [0]) $ info. = '{"username": "invalid user name", "state": "false"}'; else if ($ res1 [2]) $ info. = '{"username": "The user name already exists", "state": "false"}'; else {$ info. = '{"username": "username available", "state": "true"}'; ++ $ isSucceed;} $ info. = ','; // 2. verify that the password is invalid and the strength is $ res2 = verifyPassw ($ passw); if ($ res2 =-1) $ info. = '{"passw": "Enter Password", "state": "false"}'; else if ($ res2 = 0) $ info. = '{"passw": "invalid password", "state": "false"}'; else {if ($ res2 = 1) $ info. = '{"passw": "weak password strength", "state": "true"}'; else if ($ res2 = 2) $ info. = '{"passw": "moderate password strength", "state": "true"}'; else if ($ res2 = 3) $ info. = '{"passw": "Strong Password strength", "state": "true"}'; ++ $ isSucceed;} $ info. = ','; // 3. confirm Password if (empty ($ repassw) $ info. = '{"repassw": "enter the password", "state": "false"}'; else if ($ passw = $ repassw) {$ info. = '{"repassw": "consistent passwords", "state": "true"}'; ++ $ isSucceed;} else $ info. = '{"repassw": "inconsistent passwords", "state": "false"}'; $ info. = ','; // 4. verify email $ res3 = verifyEmail ($ email); if ($ res3 =-1) $ info. = '{"email": "Enter your email address", "state": "false"}'; else if ($ res3 = 0) $ info. = '{"email": "invalid email address", "state": "false"}'; else if ($ res3 = 1) $ info. = '{"email": "This email has been registered", "state": "false"}'; else if ($ res3 = 2) {$ info. = '{"email": "This mailbox is available", "state": "true"}'; ++ $ isSucceed ;} // Save the user registration information if ($ isSucceed = 4) saveRegInfo (array ($ username, $ passw, $ email); echo $ info. = ']';

Although this example is simple, it still gives new users a general idea about how the front-end transmits data to the back-end, and how the back-end returns data to the front-end.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.