欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2024-04-06 18:04:07
...

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就行

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

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 ;

二、页面设计

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

三、HTML部分

view/Index/index.html




四、thinkphp自动验证

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

五、 使用ajax

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

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

参数:

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

data (Map) : (可选) 要发送给服务器的数据,以 KeyThinkphp+AJAX动态验证用户输入是否合法_PHP教程alue 的键值对形式表示。

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

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

$('#username').blur(
			function() {
				var username = $(this).val();
				$.post(index.php/Home/Index/checkName, {
					'username' : username//前一个username需要跟UserModel对应,即跟数据库字段对应
				}, 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;
			});

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

验证邮箱的时候需要注意,如果用户输入邮箱后,立刻点击注册按钮,这时候会同时执行注册按钮的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 ( 'user' );
		if (! $user->create ()) {
			exit ( $user->getError () );
		} else {
			echo 0;//这是回传给$.post的数据,对应上面的data
		}
	}

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

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

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

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

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

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

八、config.php配置

 'mysql', // 数据库类型
    'DB_HOST'   => '127.0.0.1', // 服务器地址
    'DB_NAME'   => 'thinkphp', // 数据库名
    'DB_USER'   => 'root', // 用户名
    'DB_PWD'    => '123',  // 密码
    'DB_PORT'   => '3306', // 端口
    'DB_PREFIX' => 'tp_', // 数据库表前缀
);

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/929774.htmlTechArticleThinkphp+AJAX动态验证用户输入是否合法 遇到用户注册等情况时,如果等用户输入所有信息,点击注册按钮提交后,再验证输入是否正确,体...
相关标签: 动态 用户