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

二、页面设计

三、HTML部分

view/Index/index.html

<form method="post" action="{:U('Index/register')}">
		<div class="form-element">
			<label class="left">用户名:</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>密码:</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>确认密码:</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>邮箱:</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">注册</button>
			</div>
		</div>
	</form>

四、thinkphp自动验证

相关资料参考：http://doc.thinkphp.cn/manual/auto_validate.html

在UserModel定义验证规则

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) : (可选) 要发送给服务器的数据，以 Keyalue 的键值对形式表示。

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配置

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

源码：http://download.csdn.net/detail/welovesunflower/8268719

时间： 2024-10-14 18:19:28

Thinkphp+AJAX动态验证用户输入是否合法的相关文章

PHP+AJAX 验证码验证用户登录

PHP+AJAX 验证码验证用户登录 2011-03-08 22:21:59|  分类: AJAX |  标签:php  ajax  验证登录   |举报 |字号大中小 订阅 用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php:  生成验证码的PHP 文件,将验证码将在 SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件 下面一一解析:

jsf服务器端验证用户输入

服务器端验证用户输入数据步骤 1 html页面上插入要输入数据控件 ? 1 2 3 4 <h:inputText size="10" value="#{commodityBean.foradd.name}"                         id="input1">                         <f:validator validatorId="input1Validator"

使用JavaScript验证用户输入的是否为正整数

在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp(type); var flag=r.test(subjectHour.value); if(!flag){ alert("课时应为正整数"); subjectHour.focus(); return false; } 方法二: var type="^[0-9]*[1-9][0-9

Flex笔记_验证用户输入

内置验证器 Flex提供了很多内置的验证器,它们都是Validator类的子类. Flex以扩展Validator类的方式创建了内置验证器,以用于满足常用需求. Validator组件的重要属性和函数: enabled:Boolean类型,决定是否启用验证功能 required:Boolean类型,是否必填 requiredFieldError:String类型,设置显示给用户的消息 source:Object,设置想要验证的对象(组件) property:String,设置想要验证的对象属性

ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:"输入的值不符合规则,请重新输入"."提交后无法修改,您确定要继续吗?"友好性的提示. 这时候我们想到了Button有一个客户端的点击事件(OnClientClick),大家知道,ASP.NET 页面ASPX页面被创建的时候会生成 一段代码 <input type="hidden" name="__EVENTTARGET"

正则验证用户输入的是否是数字

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><input type="text" style="width:200px;height:30px;" id="name&q

JS高级---案例：验证用户输入的是不是中文名字

案例:验证用户输入的是不是中文名字 [\u4e00-\u9fa5] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> 请输入您的名字:<input type="text" value="&q

SpringMVC使用Hibernate Validator验证用户输入

一 简介 SpringMVC支持与JSR 349 Bean Validation API的集成.借助于Bean验证,可以非常容易地将验证元数据应用到实体类,并且通过合适的视图向用户展示可能的错误结果.在模型类中可以通过注解对属性验证进行定义,常见的注解有:@Size ,@Email ,@Pattern,@Max等,分别验证长度,邮箱格式,自定义正则表达式,最大值(PS:更多相关注解可以百度或者查API) 二 测试实例 (1)新建一个动态Java web项目,然后下载"Hibernate Vali

EditText自定义边框背景与动态检测用户输入

一.EditText自定义边框背景 1.效果演示 2.代码实现 (1)res/drawable/shape_edit_normal.xml 功能:编辑框没获得焦点时,使用该shape.<shape.../>为根元素的ShapeDrawable资源,主要用于定义一个基本的几何图形,如矩形.圆形.线条等. <solid.../>子元素用于指定填充集合图形的的颜色: <corners.../>子元素用于定义几个图形的四个角的弧度: <gradient../>子元素