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

遇到用户注冊等情况时。假设等用户输入全部信息，点击注冊button提交后。再验证输入是否正确，体验非常不好，并且非常浪费用户的时间，添加注冊成本，这里提供一个样例，演示了怎么使用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 ;

二、页面设计



三、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

用户输入username后。当输入框失去焦点时会触发blur事件。能够在这时候验证username输入是否正确

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

參数：

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

data (Map) : (可选) 要发送给server的数据。以 Key

alue 的键值对形式表示。

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

type (String) : (可选)官方的说明是：Type of data to be sent。事实上应该为client请求的类型(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);
}
})
});

password，反复password，邮箱验证类似

验证邮箱的时候须要注意，假设用户输入邮箱后，立马点击注冊button，这时候会同一时候运行注冊button的click事件，邮箱输入框的blur事件。因为邮箱验证是$.post是异步的，post还没有运行完，click事件里error['email']=1。不会运行$('#submit1').submit();所以这时候再设置一个标志error['submit'] = 0;0表示点击过注冊button，默觉得1，在邮箱blur回调函数中推断error['submit'] 是否等于0，即推断是否点击过，假设点击过。提交表单，假设没点击过，仅仅须要验证邮箱。

用户输入邮箱后。鼠标在屏幕上其它地方点击。仅仅运行blur，跟username。password情况一样。

六、server处理

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

以上是单步验证username的方法。以下来看怎么把全部数据提交给server

七、 把全部数据提交给server

通过上面的html代码注意到这里用了一个form，以post方式提交表单。action指向server能处理的地址

点击注冊button时，先推断全部输入是否正确。假设正确，才运行提交表单

$('#submit1').click(function() {
if ($('#username').val() == '') {
$('#tooltip1').attr('class', 'tooltip-info visible-inline error');
$('#mess1').html("username不能为空!");
}
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(); // 假设username验证失败。屏幕会滚动到username的位置。让用户又一次输入
$("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 false;
} else {
$('#submit1').submit();
return true;
}
});

server端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', // server地址
'DB_NAME'   => 'thinkphp', // 数据库名
'DB_USER'   => 'root', // username
'DB_PWD'    => '123',  // password
'DB_PORT'   => '3306', // port
'DB_PREFIX' => 'tp_', // 数据库表前缀
);

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