注册页面结构也是非常简单的,和其他页面一样,也有head、footer,唯一不同的只是页面内容<div id="content">部分,其代码如下:
一个div包含一个form表单,里面含有一个提交按钮。基本上我们的很多页面都是这样的结构,我们把页面布局和页面逻辑处理分开,页面布局由HTML标签来完成,页面上的逻辑由单独的JS代码来完成,做到结构和处理的低耦合。同样我们采用jquery-validation来进行表单提交钱的输入效验,代码如下:
<srcipt type="text/javascript">
$(function(){
$('#register_from').validate({
onkkeyup:false,
rules:{
user_name:{
reguired:true,
byteRange:[3,15,'utf-8'],
remote:{
url:'index.php?m=Index&a=ajaxRegister',
type:'post',
dataType:"json",
data:{
user_name:function(){
return $('#user_name').val();
}
},
complete : function(){
$('#checking_user').show();
}
}
},
password:{
required:true,
minlength:6
},
password_confirm:{
required:true,
equalTo:'#password'
},
email:{
required:true,
email:true
}
},
messages:{
user_name:{
required:'您必须提供一个用户名',
byteRange:'用户名必须在3-15个字符之间',
remote:'您提供的用户名已存在'
},
password:{
required:'您必须提供一个密码',
minlength:'密码长度应在6-20个字符之间
},
password_conform:{
required:'您必须再次确认您的密码',
equalTo:'两次输入的密码不一致'
},
eamil:{
required:'您必须提供您的电子邮箱',
email:'这不是一个有效的电子邮箱'
}
}
});
});
</srcipt>
我们主要做了那些效验呢?必须项的效验,邮箱格式的效验,输入字符串长度的效验,2次密码输入是否相等的效验,以及用户名是否可用的效验。其中,对用户名进行效验时使用了remote效验规则,该效验规则会向index.php?m=Index&a=ajaxRegister发送一个POSt请求,且传入用户名作为参数,起后台代码如下
以上只是检查数据库中是否存在同名用户,如果存在,则效验不通过,返回false;否则效验通过,返回true。如果返回false,模版页面中会自动显示出错误提示信息。当效验通过后,将会向User控制器的register方法发送一个POST请求。在register方法中首先获取传入的参数,然后通过用户表的模型对象完成数据库插入操作,然后将注册成功的消息返回给模版页面显示出来,就完成了整个注册的流程。