Thinkphp+AJAX dynamically verifies whether user input is legal

Thinkphp+AJAX dynamically verifies whether user input is legal_PHP tutorial

WBOY

Release： 2016-07-13 10:11:19

Original

869 people have browsed it

Thinkphp+AJAX dynamically verifies whether user input is legal

When encountering user registration and other situations, if you wait for the user to enter all the information, click the registration button to submit, and then verify whether the input is correct, the experience will be very bad, it will waste the user's time and increase the registration cost. Here is an example , demonstrates how to use ajax for single-step verification, using thinkphp 3.2 framework, environment WAMPServer 2.4, version PHP 5.4.16+ Apache 2.4.4+ MySql 5.6.12

1. Database design:

Database name thinkphp

Table name tp_user where tp_ is the table prefix, which can be defined in config.php. When operating the table, just use user

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 ;

Copy after login

2. Page design

3. HTML part

view/Index/index.html

Copy after login

4. thinkphp automatic verification

protected $_validate=array(
		array(&#39;username&#39;,&#39;require&#39;,&#39;用户名不能为空!&#39;),
		array(&#39;username&#39;,&#39;&#39;,&#39;用户名已经存在&#39;,0,&#39;unique&#39;,1), 
		array(&#39;username&#39;,&#39;/^[a-zA-Z][a-zA-Z0-9_]{1,19}$/&#39;,&#39;用户名不合法！&#39;),	
			
		array(&#39;email&#39;,&#39;require&#39;,&#39;邮箱不能为空!&#39;),
		array(&#39;email&#39;,&#39;email&#39;,&#39;邮箱格式不正确!&#39;),
		array(&#39;email&#39;,&#39;&#39;,&#39;该邮箱已经注册过！&#39;,0,&#39;unique&#39;,1),
	);
	
	protected $_auto = array( 
		array(&#39;password&#39;, &#39;md5&#39;, 1, &#39;function&#39;), // 对password字段在新增的时候使md5函数处理
	);

Copy after login

5. Use ajax

After the user enters the username, the blur event will be triggered when the input box loses focus. You can verify whether the username input is correct at this time

jQuery.post( url, [data], [callback], [type] ): Use POST method to make asynchronous requests

Parameters:

url (String): URL address to send the request.

data (Map): (optional) The data to be sent to the server, expressed in the form of key-value pairs of Key

alue.

callback (Function): (optional) Callback function when loading is successful (this method is called only when the return status of Response is success).

type (String): (optional) The official description is: Type of data to be sent. In fact, it should be the type requested by the client (JSON, XML, etc.)

$(&#39;#username&#39;).blur(
			function() {
				var username = $(this).val();
				$.post(index.php/Home/Index/checkName, {
					&#39;username&#39; : username//前一个username需要跟UserModel对应，即跟数据库字段对应
				}, function(data) {
					if (data == 0) {
						error[&#39;username&#39;] = 0;
						$(&#39;#tooltip1&#39;).attr(&#39;class&#39;,
								&#39;tooltip-info visible-inline success&#39;);
					} else {
						error[&#39;username&#39;] = 1;
						$(&#39;#tooltip1&#39;).attr(&#39;class&#39;,
								&#39;tooltip-info visible-inline error&#39;);
						$(&#39;#mess1&#39;).html(data);
					}
				})
				return false;
			});

Copy after login

Password, repeat password, email verification are similar

You need to pay attention when verifying the email. If the user clicks the registration button immediately after entering the email, the click event of the registration button and the blur event of the email input box will be executed at the same time. Since the email verification is $.post, it is asynchronous. The post has not been executed yet, error['email']=1 in the click event, $('#submit1').submit(); will not be executed, so at this time, set a flag error['submit'] = 0;0 Indicates that the registration button has been clicked. The default is 1. In the email blur callback function, it is judged whether error['submit'] is equal to 0, that is, whether it has been clicked. If it has been clicked, the form is submitted. If not, only the email needs to be verified.

After the user enters the email address and clicks the mouse elsewhere on the screen, only blur will be executed, the same as the username and password.

6. Server processing

public function checkName() {
		$user = D ( &#39;user&#39; );
		if (! $user->create ()) {
			exit ( $user->getError () );
		} else {
			echo 0;//这是回传给$.post的数据，对应上面的data
		}
	}

Copy after login

The above is the method of single-step verification of user name. Let’s see how to submit all data to the server

7. Submit all data to the server

Through the above html code, I noticed that a form is used here, the form is submitted in post mode, and the action points to the address that the server can handle
When clicking the registration button, first determine whether all inputs are correct. If correct, submit the form

$(&#39;#submit1&#39;).click(function() {
		if ($(&#39;#username&#39;).val() == &#39;&#39;) {
			$(&#39;#tooltip1&#39;).attr(&#39;class&#39;, &#39;tooltip-info visible-inline error&#39;);
			$(&#39;#mess1&#39;).html(用户名不能为空!);
		}
		if ($(&#39;#password&#39;).val() == &#39;&#39;) {
			$(&#39;#tooltip2&#39;).attr(&#39;class&#39;, &#39;tooltip-info visible-inline error&#39;);
			$(&#39;#mess2&#39;).html(密码不能为空!);
		}
		if ($(&#39;#repassword&#39;).val() == &#39;&#39;) {
			$(&#39;#tooltip22&#39;).attr(&#39;class&#39;, &#39;tooltip-info visible-inline error&#39;);
			$(&#39;#mess22&#39;).html(确认密码不能为空!);
		}
		if ($(&#39;#email&#39;).val() == &#39;&#39;) {
			$(&#39;#tooltip3&#39;).attr(&#39;class&#39;, &#39;tooltip-info visible-inline error&#39;);
			$(&#39;#mess3&#39;).html(邮箱不能为空!);
		}
		if (error[&#39;username&#39;] == 1) {
			var scroll_offset = $(#tooltip1).offset(); // 如果用户名验证失败，屏幕会滚动到用户名的位置，让用户重新输入
			$(body,html).animate({
				scrollTop : scroll_offset.top
			// 让body的scrollTop等于pos的top，就实现了滚动
			}, 0);
			return false;
		} else if (error[&#39;password&#39;] == 1) {

			return false;
		} else if (error[&#39;email&#39;] == 1) {
			error[&#39;submit&#39;] = 0;
			return true;
		} else {			
			$(&#39;#submit1&#39;).submit();
			return true;
		}
	});

Copy after login

The server-side register method receives all data. If successful, it will jump to the Home/index page. If it fails, it will jump to the error page.

public function register() {
		$user = D ( &#39;user&#39; );
		if (! $user->create ()) {
			dump ( $user->getError () );
		}
		$uid = $user->add ();
		
		if ($uid) {
			$_SESSION [&#39;username&#39;] = $_POST [&#39;username&#39;];
			$this->redirect ( &#39;Home/index&#39; );
		} else {
			$this->error ( 注册失败！ );
		}
	}

Copy after login

8. config.php configuration

<!--?php
return array(
	 /* 数据库配置 */
    &#39;DB_TYPE&#39;   =--> &#39;mysql&#39;, // 数据库类型
    &#39;DB_HOST&#39;   => &#39;127.0.0.1&#39;, // 服务器地址
    &#39;DB_NAME&#39;   => &#39;thinkphp&#39;, // 数据库名
    &#39;DB_USER&#39;   => &#39;root&#39;, // 用户名
    &#39;DB_PWD&#39;    => &#39;123&#39;,  // 密码
    &#39;DB_PORT&#39;   => &#39;3306&#39;, // 端口
    &#39;DB_PREFIX&#39; => &#39;tp_&#39;, // 数据库表前缀
);

Copy after login