淘淘商城系列——单点登录之用户注册页面实现

首先，我们还是先看一下注册页面，如下图所示。



上图箭头指向的链接在register.jsp的代码当中的位置如下图所示。



由于我现在对js不是很熟悉，注册页面对输入合法性的校验就不像正规网站那种校验方式了，我只是在点击”立即注册”的时候统一做下校验，如果不合法就弹出一个alert警告框（注意：实际工作中是绝不允许用alert来提示校验信息的，js好的同学可以自己把校验这块完善一下）。点击”立即注册”触发的方法是”REGISTER.reg()”，这个REGISTER对象是js定义的，如下图所示。



REGISTER对象的reg方法在js代码的最下方，如下图所示，可以看到它会先去调用inputcheck()方法判断文本框是否为空以及密码是否一致。



inputcheck方法的代码如下图所示。



判断完用户名、密码、手机号不能为空及两次密码输入一致之后，在提交之前，我们还需要判断一下用户名和手机号是否已经注册过了，如果用户名和手机号都没有被注册过，那么就允许注册，调用REGISTER.doSubmit()方法，doSubmit方法中调用了注册接口，如下图所示。由于检查用户名、手机号的接口以及注册的接口我们都已经写好了，因此直接调用即可。另外说一点就是，

url : REGISTER.param.surl + "/user/check/"+escape($("#regName").val())+"/1?r=" + Math.random(),

这句代码中的Math.random()的作用是每次提交请求都是新的请求，避免浏览器缓存的影响。在doSubmit方法中有个参数是

$("#personRegForm").serialize()

，它的作用是将表单进行序列化，转换成key-value形式的字符串。



好了，看了register.jsp页面的代码后，我们现在来测试下注册功能，我们在注册页面输入没有注册过的用户名和手机号，然后点击”立即注册”，会看到弹出”用户注册成功”的提示信息，我们点击弹出框中的”确定”按钮。



点”确定”按钮后，页面会自动跳转到登录页面，如下图所示。



这样，我们的用户注册页面便实现了。