现在的位置: 首页 > 综合 > 正文

仿凤凰网的注册页面,javascript完成简单的空/邮箱格式/字符串的长度校验 ajax完成服务器端是否同名校验

2018年02月05日 ⁄ 综合 ⁄ 共 7432字 ⁄ 字号 评论关闭

register.jsp界面代码如下:

注意以下几点:1,文本框的name,id最好一致,规范性的命名才符合实际应用,

    2,后面校验的显示信息此处我定义的为原来id+“js”,当然这里可以随意,不过,关于验证所有的文本框是否为空这方法中我把封装一工具方法,当然可以每个都判断,不过太麻烦,我见凤凰网的注册页面就是这样一个一个的写,太麻烦了。

 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<base href="<%=basePath%>">
	<head>
	<link href="css/main.css" type="text/css"  media="screen"  rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/register.js"></script>
		<title>我的博客系统注册</title>
	</head>
	<body>
	<div class="registerBody">
	<div style="height:500px;" class="registerBox" >
		<div class="tit" style="padding:10px 10px 0 0; height:35px; background-position:left bottom;">
		<span style="float:right">
		已经注册?请直接
		<a href="">
		<strong class="u_blue">
			<u>登录</u>
		</strong>
		</a>
		</span>
		<h3 class="u_blue">注册用户</h3>
	</div>
		<hr/>
		<s:form name="reg" action="register" validate="true">
			<table align="center">
				<tr>
					<td>
						<label>
							帐号:
						</label>
					</td>
					<td>
						<input type="text" id="username" name="username" />
						*
					</td>
					<td>
						<div id="usernameJS"></div>
					</td><td id="usernameMessage"></td>
				</tr>
				<tr>
					<td>
						<label>
							密码:
						</label>
					</td>
					<td>
						<input type="password" id="password" name="password" />
						*
					</td>
					<td>
						<div id="passwordJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							确认密码:
						</label>
					</td>
					<td>
						<input type="password" id="repassword" name="repassword" />
						*
					</td>
					<td>
						<div id="repasswordJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							邮箱 :
						</label>
					</td>
					<td>
						<input type="text" id="email" name="email" />
						*
					</td>
					<td>
						<div id="emailJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							昵称:
						</label>
					</td>
					<td>
						<input type="text" id="nickname" name="nickname" />
						*
					</td>
					<td>
						<div id="nicknameJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							密码保护问题:
						</label>
					</td>
					<td>
						<input type="text" id="question" name="question" />
						*
					</td>
					<td>
						<div id="questionJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							密码保护的答案:
						</label>
					</td>
					<td>
						<input type="text" id="answer" name="answer" />
						*
					</td>
					<td>
						<div id="answerJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" id="submit" value="注册" onclick="return doSubmit()"/>
					</td>
				</tr>
			</table>
		</s:form>
	</div>
	
	<hr/>
	<div class="copyright" align="center">
	博客网站 版权所有
<br>
Copyright © 2008-2012 Henu University. All Rights Reserved. 
	</div></div>
	</body>
</html>

页面如下:

当然界面可以加些图片,因为我美感不好,弄个丑八怪,基本雏形就这样。

下面是js代码:

$().ready(function() {
			isNullValidate("#username", "用户名不能为空","请输入常用的用户名,该用户名将作为登录"), 
			isNullValidate("#password", "密码不能为空","请设置您的密码"),
			isNullValidate("#repassword", "确认密码不能为空","请输入常用密码"),
			isNullValidate("#nickname","昵称不能为空","请设置您的昵称"),
			isNullValidate("#question", "密保问题不能为空","请设置您的密保"), 
			isNullValidate("#answer", "答案不能为空","请设置您的密保问题"),
			isNullValidate("#email","邮箱不能为空","请设置您的邮箱")
			validateEmail(),
			validateUsername(),
			validateLength("#username",3,20,"用户名长度必须为3-20位"),
			validateLength("#password",3,30,"用户名长度必须为3-30位"),
			validateEqual("#password","#repassword","密码不一致")
		})

//isNull校验是否为空
function isNullValidate(id, message,messageTip) {
	//失去焦点 进行校验
	$(id).blur(function(){
		isNull(id,message);
		});
	//得到焦点显示的提示信息
	$(id).focus(function(){
		showTip(id,messageTip);
		});
}
function showTip(id,messageTip){
	var idJS= id + "JS";
	$(idJS).css({"color":"black"});
	showMessage(idJS,messageTip);
}
function isNull(id,message){
		var value = $(id).val();
		var idJS = id + "JS";
		if (value == null || value == "") {
			$(idJS).css({"color":"red"});
			$(id).css({"background":"gray","border-color":"red","border":""});
			showMessage(idJS, message);
			return false;
		} else {
			$(id).css({"background":"white"});
			showMessage(idJS, "");
			showPic(idJS);
			return true;
		}
}
//validateLength校验长度
function validateLength(id, min, max, message) {
	$(id).blur(function() {
		validate_length(id,min,max,message);
	})
}
function validate_length(id,min,max,message){
		var idJS = id + "JS";
		var value = $(id).val();
		if (value.length < min || value.length > max){
			showMessage(idJS, message);
			$(idJS).css({"color":"red"});
			return false;
		}
		else{
			showMessage(idJS, "");
			showPic(idJS);
			return true;
			}
}
//validateEqual校验是否相等
function validateEqual(id1, id2, message) {
	//此处无法$(id1,id2),否则将出现奇怪的错误,而其他网站也同样有这样的bug
	//比如前两次分别输入密码(password,repassword)相同,当改变第一个密码加其他的后不提示密码不一致
	$(id2).blur(function() {
	validate_equal(id1,id2,message);
	})
}
function validate_equal(id1,id2,message){
		var idJS2 = id2 + "JS";
		var value1 = $(id1).val();
		var value2 = $(id2).val();
		if (value1 != value2) {
			showMessage(idJS2, message);
			$(idJS2).css({"color":"red"});
			$(id2).css({"background":"gray","border-color":"red","border":""});
			$(id1).css({"background":"gray","border-color":"red","border":""});
			return false;
		} else {
			$(id1).css({"background":"white"});
			$(id2).css({"background":"white"});
			showMessage(idJS2, "");
			showPic(idJS2);
			return true;
		}
}
//validateEmali校验email格式
function validateEmail() {
	$("#email").blur(function(){
		isEmail();
	} )
}
function isEmail(){
			var email = $("#email").val();
			var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
			if (reg.test(email)) {
//				showMessage("#emailJS", "");
//				showPic("#emailJS");
				return true;
			} else {
				showMessage("#emailJS", "Email格式不正确");
				$("#emailJS").css({"color":"red"});
				$("#email").css({"background":"gray","border-color":"red","border":""});
				return false;
						}
}
function validateName(){
		$.ajax( {
			type : "POST",
			url : "executeUsername",
			data : "username=" + $("#username").val(),
			success : getValidateName,
			dataType : "text"
			});
}
function getValidateName(message) {
				if(message == "false"){
					showMessage("#usernameJS","用户名已注册,请更换注册名");
					$("#username").css({"background":"gray","border-color":"red","border":""});		
					$("#usernameJS").css({"color":"red"});
					return false;
				}
				else{
					showMessage("#usernameJS","恭喜你,此用户名可用");
					$("#username").css({"background":"white"});
					$("#usernameJS").css({"color":"green"});
					return true;
				}
			}
//valivateUsername校验用户名是否被注册
function validateUsername() {
	$("#username").blur(function(){
		var value=$("#username").val();
		if(value!=null&&value!=""){
		validateName();
		}else return false;
	} )
}
//showMessage工具方法,显示某id需要显示的信息
function showMessage(id, message) {
	$(id).html(message);
}
function showPic(id) {
	$(id).append("<img src='images/register_ok.png'></img>");
}


function doSubmit(){
	
		if(isNull("#username", "用户名不能为空","#usernameJS")
			&& isNull("#password", "密码不能为空","#passwordJS")
			&& isNull("#repassword", "确认密码不能为空","#repasswordJS")&&  isNull("#nickname","昵称不能为空","#nicknameJS")
			&& isNull("#question", "密保问题不能为空","#questionJS")&&  isNull("#answer", "答案不能为空","#answerJS")
			&& isNull("#email","邮箱不能为空","#emailJS")
			&& isEmail()
//			&& validateName()
			&& validate_length("#username",3,20,"用户名长度必须为3-20位")
			&& validate_length("#password",3,30,"用户名长度必须为3-30位")
			&& validate_equal("#password","#repassword","密码不一致")){
				return true;
			}
			else {
				alert("请重新输入");
				return false;
			}
		}

相信大家也看到了,

$().ready(function() 定义页面加载的脚本,这里我们绑定文本框的focus和blur事件,即,聚焦和失去焦点,当聚焦时在div里显示出要输入的信息,而失去焦点时进行校验,这里有个关键的,利用ajax往action里查询是否有输入的用户名,并返回true或false字符串,

所以

function validateName(){
		$.ajax( {
			type : "POST",
			url : "executeUsername",
			data : "username=" + $("#username").val(),
			success : getValidateName,
			dataType : "text"
			});
}传参数,返回函数处理如下:

function getValidateName(message) {
				if(message == "false"){
					showMessage("#usernameJS","用户名已注册,请更换注册名");
					$("#username").css({"background":"gray","border-color":"red","border":""});		
					$("#usernameJS").css({"color":"red"});
					return false;
				}
				else{
					showMessage("#usernameJS","恭喜你,此用户名可用");
					$("#username").css({"background":"white"});
					$("#usernameJS").css({"color":"green"});
					return true;
				}
			}
action中处理:

public String executeUsername(){
	HttpServletResponse response = ServletActionContext.getResponse();
	response.setCharacterEncoding("UTF-8");
	PrintWriter writer = null;
	try {
		writer = response.getWriter();
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	if(userService.regusterUsername(username)){
		writer.print("false");
	}else{
		writer.print("true");
	}
	return null;
}

此时基本完成,下面是效果图:

抱歉!评论已关闭.