Thinkphp+ajax dynamically verifies that user input is legitimate

Encounter user registration and so on, if the user input all information, click on the registration button to submit, then verify the input is correct, the experience is not good, but also a waste of user time, increase the registration cost, here is an example of how to use Ajax for single-step verification, using the Thinkphp 3.2 framework, Environment Wampserver 2.4, version php 5.4.16+ Apache 2.4.4+ MySql 5.6.12

First, the database design:

Database name thinkphp

Table name Tp_user where tp_ is a table prefix, which can be defined in config.php, when the table is manipulated using only the user.

Second, the page design

Third, the HTML part

View/index/index.html

<form method= "POST" action= "{: U (' Index/register ')}" ><div class= "form-element" ><label class= "left" > Username: </label><div><input type= "text" name= "username" id= "username" value= ""/><div id= " ToolTip1 "class=" Tooltip-info prompt "><span class=" Tooltip-icon-border "></span> <span class=" TOOLTIP-ICON-BG "></span> <span class=" state "></span> <span id=" Mess1 "class=" mess "></ Span></div></div></div><div class= "form-section" ><div class= "Form-element" >< label> Password: </label><div><input type= "password" name= "password" id= "password" value= ""/><div Id= "Tooltip2" class= "Tooltip-info prompt" ><span class= "Tooltip-icon-border" ></span> <span class= " TOOLTIP-ICON-BG "></span> <span class=" state "></span> <span id=" Mess2 "class=" mess "></ Span></div></div></div><div class= "Form-element" ><label> ConfirmationPassword: </label><div><input type= "password" name= "Repassword" id= "Repassword" value= ""/><div id= " Tooltip22 "class=" Tooltip-info prompt "><span class=" Tooltip-icon-border "></span> <span class=" TOOLTIP-ICON-BG "></span> <span class=" state "></span> <span id=" mess22 "class=" mess ">< /span></div></div></div><div class= "form-element" ><label> email:</label>< Div><input type= "text" name= "email" id= "email" value= ""/><div id= "TOOLTIP3" class= "Tooltip-info Prompt" ><span class= "Tooltip-icon-border" ></span> <span class= "TOOLTIP-ICON-BG" ></span> < Span class= "state" ></span> <span id= "MESS3" class= "mess" ></span></div></div></ Div></div><div><div><button type= "Submit" Name= "C12" id= "Submit1" class= "button-action Large "> Registration </button></div></div></form>

Iv. Automatic verification of thinkphp

Related Information reference: http://doc.thinkphp.cn/manual/auto_validate.html

Defining validation rules in Usermodel

Protected $_validate=array (Array (' username ', ' require ', ' username cannot be empty! '), Array (' username ', ' ', ' username already exists ', 0, ' unique ', 1), Array (' username ', '/^[a-za-z][a-za-z0-9_]{1,19}$/', ' username is not legal! '), array (' email ', ' require ', ' mailbox cannot be empty! '), array (' email ', ' email ', ' email ' is not properly formatted! '), array (' email ', ' ', ' the mailbox has been registered! ', 0, ' unique ', 1),;p rotected $_auto = Array (array (' Password ', ' MD5 ', 1, ' function '),//password field is processed by the MD5 function when added);

V. Use of Ajax

When the user enters the user name, the Blur event is triggered when the input box loses focus, and it is time to verify that the user name input is correct

Jquery.post (URL, [data], [callback], [type]): Use post to make asynchronous requests

Parameters:

URL (String): The URL address of the sending request.

Data (MAP): (optional) to be sent to the server, in the form of Keyalue key-value pairs.

Callback (function): (optional) The callback function when loading succeeds (the method is called only if the return state of response is success).

Type (String): (optional) The official description is: Type of data to be sent. The type that should actually be requested for the client (json,xml, etc.)

$ (' #username '). blur (function () {var username = $ (this). Val (); $.post ("Index.php/home/index/checkname", {' username '): username//the previous username needs to correspond to the Usermodel, which corresponds to the database field}, function (data) {if (data = = 0) {error[' username '] = 0;$ (' #tooltip1 '). attr (' class ', ' tooltip-info visible-inline Success ');} else {error[' username '] = 1;$ (' #tooltip1 '). attr (' class ', ' tooltip-info visible-inline error '); $ (' #mess1 '). HTML (data) ;}}) return false;});

Password, duplicate password, email verification similar

To verify the mailbox when you need to note that if the user entered the mailbox, immediately click the Register button, this time will execute the Click event of the Registration button, the Mailbox input box blur event, because the mailbox verification is $.post is asynchronous, Post has not finished, click event error[' Email ']=1, will not execute $ (' #submit1 '). submit (); So this time again set a flag error[' submit '] = 0;0 means click the Register button, default to 1, in the mailbox Blur callback function to Judge error[' submit '] is equal to 0, that is to determine whether clicked, if clicked, submit the form, if not clicked, only need to verify the mailbox.

After the user enters the mailbox, the mouse clicks on the other place on the screen, only executes the blur, with the user name, the password situation.

Six, server processing

Public Function CheckName () {$user = D (' user '), if (! $user->create ()) {exit ($user->geterror ());} else {echo 0;//This is the data passed back to $.post, corresponding to the above information}}

The above is a single step to verify the user name method, the following see how to submit all the data to the server

Vii. submit all data to the server

Notice from the above HTML code that here is a form that submits the form as a post, and the action points to the address that the server can handle
When you click the Register button, first determine if all the inputs are correct, and then execute the submission form if correct.

$ (' #submit1 '). Click (function () {if ($ (' #username '). val () = = ") {$ (' #tooltip1 '). attr (' class ', ' Tooltip-info Visible-inline error '); $ (' #mess1 '). HTML ("User name cannot be empty!");} if ($ (' #password '). val () = = ") {$ (' #tooltip2 '). attr (' class ', ' tooltip-info visible-inline error '); $ (' #mess2 '). HTML (" The password cannot be empty! ");} if ($ (' #repassword '). val () = = ") {$ (' #tooltip22 '). attr (' class ', ' tooltip-info visible-inline error '); $ (' #mess22 '). HTML ("Confirm password cannot be empty!");} if ($ (' #email '). val () = = ") {$ (' #tooltip3 '). attr (' class ', ' tooltip-info visible-inline error '); $ (' #mess3 '). HTML (" The mailbox cannot be empty! ");} if (error[' username ' = = 1) {var Scroll_offset = $ ("#tooltip1"). offset ();//If the user name verification fails, the screen will scroll to the user name's location and let the user reenter the $ ("body,html "). Animate ({scrolltop:scroll_offset.top//Let the body's scrolltop equals the top of the POS, it implements scrolling}, 0); return false;} else if (error[' password ' = = 1) {return false;} else if (error[' email '] = = 1) {error[' submit '] = 0;return true;} else {$ ( ' #submit1 '). Submit (); return true;});

The server-side register method receives all data if it successfully jumps to the Home/index page, and if it fails, jumps to the error prompt page

Public Function Register () {$user = D (' user '), if (! $user->create ()) {Dump ($user->geterror ());}  $uid = $user->add (), if ($uid) {$_session [' username '] = $_post [' username ']; $this->redirect (' Home/index ');} else {$this->error ("Registration failed! " );}}

Eight, config.php configuration

<?phpreturn Array (/* Database configuration */    ' db_type '   = ' mysql ',//database type    ' db_host '   = ' = ' 127.0.0.1 ',// Server address    ' db_name '   = ' thinkphp ',//database name    ' db_user ' +   ' root ',//username    ' db_pwd '    = ' 123 ' ,  //password    ' db_port '   = ' 3306 ',//Port    ' db_prefix ' = ' tp_ ',//database table prefix);

Source: http://download.csdn.net/detail/welovesunflower/8268719

Thinkphp+ajax dynamically verifies that user input is legitimate