How does Thinkphp + AJAX dynamically verify user input?

Source: Internet
Author: User
Tags button type md5

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
);

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.