In the case of user registration, if you wait for the user to enter all the information, click the registration button to submit, and then verify that the input is correct, the user experience is poor, and it is a waste of time, an example is provided to demonstrate how to use ajax for one-step verification. The thinkphp 3.2 framework, WAMPServer 2.4 environment, and PHP 5.4.16 + Apache 2.4.4 + MySql 5.6.12
I. Database design:
Database name thinkphp
Table name: tp_user, where tp _ is the table prefix, which can be defined in config. php. Only user is used to operate the table.
Create table if not exists 'TP _ user '(
'Id' int (11) not null AUTO_INCREMENT,
'Username' varchar (30) not null,
'Password' varchar (255) not null,
'Email 'varchar (50) not null,
Primary key ('id ')
) ENGINE = MyISAM default charset = utf8 AUTO_INCREMENT = 1;
II. Page design
III. HTML
<Form method = "post" action = "{: U ('index/register ')}">
<Div class = "form-element">
<Label class = "left"> user name: </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> Confirm password: </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"> register </button>
</Div>
</Div>
</Form>
IV. Automatic verification of thinkphp
Reference: http://doc.thinkphp.cn/manual/auto_validate.html
Define verification rules in UserModel
Protected $ _ validate = array (
Array ('username', 'require ', 'user name cannot be blank! '),
Array ('username', '', 'username already exists ', 0, 'Unique', 1 ),
Array ('username', '/^ [a-zA-Z] [a-zA-Z0-9 _] {} $/', 'username is invalid! '),
Array ('email ', 'require', 'mailbox cannot be blank! '),
Array ('email ', 'Email', 'the email format is incorrect! '),
Array ('email ',', 'this email address has already been registered! ', 0, 'Unique', 1 ),
);
Protected $ _ auto = array (
Array ('password', 'md5', 1, 'Function'), // use the md5 function to process the password field when it is added.
);
5. Use ajax
After you enter the user name, the blur event is triggered when the input box loses focus. You can verify that the user name is entered correctly at this time.
JQuery. post (url, [data], [callback], [type]): use the POST method for asynchronous requests.
Parameters:
Url (String): The URL of the request.
Data (Map): (optional) data to be sent to the server, with the Key
Alue key-value pairs.
Callback (Function): (optional) callback Function when the load is successful (this method is called only when the Response returns success ).
Type (String): (optional) The official description is: Type of data to be sent. In fact, it should be the client request type (JSON, XML, and so on)
$ ('# Username'). blur (
Function (){
Var username = $ (this). val ();
$. Post ("index. php/Home/Index/checkName ",{
'Username': username // the previous username must correspond to the UserModel, that is, 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 ');
Certificate ('{mess1'{.html (data );
}
})
});
Password, repeated password, similar to email verification
When verifying the email address, you must note that if you enter the email address and click the Register button immediately, the click event of the registration button and the blur event in the email box will be executed at the same time, because the email address verification is $. post is asynchronous, and the post is not executed yet. In the click event, error ['email '] = 1 and $ (' # submit1 ') is not executed '). submit (); so at this time, set another flag error ['submit '] = 0; 0 indicates that the registration button has been clicked. The default value is 1, in the blur callback function of the mailbox, determine whether error ['submit '] is equal to 0, that is, whether or not you have clicked it. If you have clicked it, submit the form. If you have not clicked it, you only need to verify the mailbox.
After the user enters the email address, the mouse clicks elsewhere on the screen and only performs blur, which is the same as the user name and password.
VI. Server processing
Public function checkName (){
$ User = D ('user ');
If (! $ User-> create ()){
Exit ($ user-> getError ());
} Else {
Echo 0; // This is the data returned to $. post, corresponding to the above data
}
}
The above method is used to verify the user name in one step. The following describes how to submit all the data to the server.
7. Submit all data to the server
The preceding html code indicates that a form is used to submit the form in post mode. The action points to the address that can be processed by the server.
When you click the Register button, you must first determine whether all inputs are correct. If yes, the submission form is executed.
$ ('# Submit1'). click (function (){
If ($ ('# username'). val () = ''){
$ ('# Tooltip1'). attr ('class', 'tooltip-info visible-inline error ');
Users ('{mess1'{.html ("the user name cannot be blank! ");
}
If ($ ('# password'). val () = ''){
$ ('# Tooltip2'). attr ('class', 'tooltip-info visible-inline error ');
Certificate ('{mess2'{.html ("The password cannot be blank! ");
}
If ($ ('# repassword'). val () = ''){
$ ('# Tooltip22'). attr ('class', 'tooltip-info visible-inline error ');
Certificate ('{mess22'}.html ("confirm the password cannot be blank! ");
}
If ($ ('# email'). val () = ''){
$ ('# Tooltip3'). attr ('class', 'tooltip-info visible-inline error ');
Email ('{mess3'{.html ("the email cannot be blank! ");
}
If (error ['username'] = 1 ){
Var scroll_offset = $ ("# tooltip1"). offset (); // if the user name verification fails, the screen will scroll to the location of the user name and ask the user to enter it again
$ ("Body, html"). animate ({
ScrollTop: scroll_offset.top
// Let the scrollTop of the body be equal to the top of the pos, and the scroll is realized.
}, 0 );
Return false;
} Else if (error ['password'] = 1 ){
Return false;
} Else if (error ['email '] = 1 ){
Error ['submit '] = 0;
Return false;
} Else {
$ ('# Submit1'). submit ();
Return true;
}
});
The server-side register method receives all the data. If it is successfully redirected to the Home/index page, if it fails, it 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! ");
}
}
8. config. php configuration
<? Php
Return array (
/* Database configuration */
'Db _ type' => 'mysql', // Database TYPE
'Db _ host' => '127. 0.0.1 ', // server address
'Db _ name' => 'thinkphp', // database NAME
'Db _ user' => 'root', // USER name
'Db _ pwd' => '123', // password
'Db _ port' => '123', // PORT
'Db _ prefix' => 'TP _ ', // database table PREFIX
);