BBS项目笔记之十:登录和注册模块的前台实现

一:登录

1.验证码

登录过程中比较麻烦的就是: 验证码 和 "重新获取验证码"

页面出来就先加载

window.onload = function() {setValidateCode();}

这个生成验证码的js不太好 ,  不过能搜到更好的 有的是

function setValidateCode() {var s = '';var colors = new Array('Red', "Green", 'Gray', 'Blue', 'Maroon','Fuchsia', 'Lime', 'Olime', 'Silver', '#SDFD5W'); // 定义半天颜色 实际上没用for ( var i = 0; i < 5; i++) {var num = Math.floor(Math.random() * 10);s += num ;}$('#validate').text(s);}

验证码的提交

<tr><td valign="top">输入验证码： <input id="validate_input" type="text" size="30" style="width: 200px;" /></td></tr>

<tr><td width="191" valign="top" style="padding-left: 24px;">验证码：  <span id="validate"></span></td><td width="191" valign="top" class="chengse"style="cursor: hand;" onclick=setValidateCode();>看不清，换一张</td></tr>

2.登录js

按钮

<tr><td><img onclick="login()" src="images/loginb.gif" width="127" height="38" style="cursor: hand;" /></td></tr>

登录js

function login() {if (!$.trim($('#userName').val())) {           alert('用户名不能为空');           return;    }if (!$.trim($('#password').val())) {           alert('密码不能为空');           return;    }var validate = $('#validate').text();var validate_input = $('#validate_input').val();        if (!$.trim(validate_input)) {           alert('验证码不能为空');        }if (validate != validate_input) {          alert('验证码不对,请重新输入');          return;}loginForm.submit();}

二:注册

1.条款

条款这个原来没做过, 就是一个只读的 带滚动条的textarea 

<tr><td width="350" valign="top">条款：<br /><textarea rows="9" cols="45" style="margin-bottom: 6px;" readOnly="true" id="item"></textarea> <span class="huise1"> </span></td></tr>

从目录中把条款读出来

//读取条款信息$(function() {$.ajax( {url : 'txt/item.txt',type : 'POST',dataType : 'text',success : function(data) {$('#item').val(data);}});});

2.注册信息的提交

<tr><td align="center" valign="top"><img src="images/btn_register.gif" width="302" height="36" onclick="register('registerForm')" style="cursor: hand;" /></td></tr>

style="cursor: hand; 是鼠标移过去时候显示成手型 ,想要兼容所有浏览器就要用 cursor:pointer

注册用了ajax

把信息组装成json

function register(form) {var userName = $.trim($('#userName').val());if (!userName) {alert('用户名称不能为空');return;}$.ajax( {url : 'userAction_findUserByUserName',type : 'POST',processDate : true,data : $('#registerForm').serialize(),dataType : 'json',success : function(data) {if (data.userExsist == true) {alert('用户名称已经存在');return;}var psw = $.trim($('#password').val());if (psw.length > 15 || psw < 6) {alert('密码长度不对,请重新输入');return;}var confirmPassword = $.trim($('#confirmPassword').val());      //取得id为confirmPassword的文本库的值，并将前后空格去掉if (!psw) {alert('密码不能为空');return;}if (psw != confirmPassword) {alert('两次密码输入不一致');$('#password').val('');$('#confirmPassword').val('');return;}$('#' + form)[0].submit(); //提交第一个表格 }});}

public String findUserByUserName() {this.user = this.userDao.getUserByUserName(this.user.getUserName());if (this.user != null) {JSONKit.outJSONInfo("{success:true,userExsist:true,'aaaaaa':'aaaaaa'}");return NONE;}JSONKit.outJSONInfo("{success:true}");return NONE;}