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

本文介绍了一个简单的登录与注册页面的实现方法，包括验证码生成、登录验证、注册信息提交等功能的JavaScript代码。登录部分详细解释了如何使用JavaScript生成验证码及验证用户输入；注册部分则涉及用户条款展示和注册信息验证。

一:登录

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;
	}