Thinkphp+AJAX动态验证用户输入是否合法

Thinkphp+AJAX动态验证用户输入是否合法_PHP教程

WBOY

Libérer： 2016-07-13 10:11:19

original

869 Les gens l'ont consulté

Thinkphp+AJAX动态验证用户输入是否合法

遇到用户注册等情况时，如果等用户输入所有信息，点击注册按钮提交后，再验证输入是否正确，体验很不好，而且很浪费用户的时间，增加注册成本，这里提供一个例子，演示了怎么使用ajax进行单步验证，使用thinkphp 3.2框架，环境WAMPServer 2.4，版本PHP 5.4.16+ Apache 2.4.4+ MySql 5.6.12

一、数据库设计：

数据库名 thinkphp

表名 tp_user 其中tp_是表前缀，可以在config.php中定义，操作表的时候只用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 ;

Copier après la connexion

二、页面设计

三、HTML部分

view/Index/index.html

Copier après la connexion

四、thinkphp自动验证

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函数处理
	);

Copier après la connexion

五、使用ajax

用户输入用户名后，当输入框失去焦点时会触发blur事件，可以在这时候验证用户名输入是否正确

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key

alue 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

$(&#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;
			});

Copier après la connexion

密码，重复密码，邮箱验证类似

验证邮箱的时候需要注意，如果用户输入邮箱后，立刻点击注册按钮，这时候会同时执行注册按钮的click事件，邮箱输入框的blur事件，由于邮箱验证是$.post是异步的，post还没有执行完，click事件里error['email']=1，不会执行$('#submit1').submit();所以这时候再设置一个标志error['submit'] = 0;0表示点击过注册按钮，默认为1，在邮箱blur回调函数中判断error['submit'] 是否等于0，即判断是否点击过，如果点击过，提交表单，如果没点击过，只需要验证邮箱。

用户输入邮箱后，鼠标在屏幕上其他地方点击，只执行blur，跟用户名，密码情况一样。

六、服务器处理

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

Copier après la connexion

以上是单步验证用户名的方法，下面来看怎么把所有数据提交给服务器

七、把所有数据提交给服务器

通过上面的html代码注意到这里用了一个form，以post方式提交表单，action指向服务器能处理的地址
点击注册按钮时，先判断所有输入是否正确，如果正确，才执行提交表单

$(&#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;
		}
	});

Copier après la connexion

服务器端register方法接收所有数据，如果成功跳转到Home/index页面，如果失败，跳转到错误提示页面

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 ( 注册失败！ );
		}
	}

Copier après la connexion

八、config.php配置

<!--?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;, // 数据库表前缀
);

Copier après la connexion