遇到用户注册等情况时，如果等用户输入所有信息，点击注册按钮提交后，再验证输入是否正确，体验很不好，而且很浪费用户的时间，增加注册成本，这里提供一个例子，演示了怎么使用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就行
|
1
2
3
4
5
6
7
|
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
|
1
|
|
四、thinkphp自动验证
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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) : (可选) 要发送给服务器的数据，以 Key
alue 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(
'#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，跟用户名，密码情况一样。
六、服务器处理
|
1
2
3
4
5
6
7
8
|
public
function checkName() {
$user = D (
'user'
);
if
(! $user->create ()) {
exit ( $user->getError () );
}
else
{
echo
0
;
//这是回传给$.post的数据，对应上面的data
}
}
|
以上是单步验证用户名的方法，下面来看怎么把所有数据提交给服务器
七、 把所有数据提交给服务器
通过上面的html代码注意到这里用了一个form，以post方式提交表单，action指向服务器能处理的地址
点击注册按钮时，先判断所有输入是否正确，如果正确，才执行提交表单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
$(
'#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页面，如果失败，跳转到错误提示页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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配置
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--?php
return
array(
/* 数据库配置 */
&#
39
;DB_TYPE&#
39
; =-->
'mysql'
,
// 数据库类型
'DB_HOST'
=>
'127.0.0.1'
,
// 服务器地址
'DB_NAME'
=>
'thinkphp'
,
// 数据库名
'DB_USER'
=>
'root'
,
// 用户名
'DB_PWD'
=>
'123'
,
// 密码
'DB_PORT'
=>
'3306'
,
// 端口
'DB_PREFIX'
=>
'tp_'
,
// 数据库表前缀
);
|
扫一扫
3514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
