遇到用户注册等情况时，如果等用户输入所有信息，点击注册按钮提交后，再验证输入是否正确，体验很不好，而且很浪费用户的时间，增加注册成本，这里提供一个例子，演示了怎么使用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
四、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方式来进行异步请求
参数：
$('#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;
}
});
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_', // 数据库表前缀
);