java代码检查注册用户名是否存在 java验证用户名是否重复

转载

bigrobin 2024-08-12 21:20:51

文章标签 java代码检查注册用户名是否存在 jquery ajax function 服务器 文章分类 Java 后端开发

JS代码：

/*
 * 需要通过Javascript代码来做两件事情
 * 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果
 * 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留
 * */

/*
 * 需要在页面装载完成是注册上这些工作
 * */
$(document).ready(function() {
	//这里面的内容就是页面装载完成后需要执行的代码
	var userNameNode = $("#userName");	
	//需要找到button按扭，注册事件
	$("#verifyButton").click(function() {
		//1.获取文本框的内容
		var userName = userNameNode.val();
		//2.将这个内容发送给服务器端
		if (userName == "") {
			alert("用户名不能为空");
		} else {
			$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
					//3.接收服务器端返回的数据，填充到div中	
					$("#result").html(response);
				});		
			
		}
	});
	//需要找到文本框，注册事件
	userNameNode.keyup(function(){
		//获取当前文本框中的内容
		var value = userNameNode.val();
		if (value == "") {
			//让边框变成红色，并且带背景图
			userNameNode.addClass("userText");
		} else {
			//去掉边框和背景图
			userNameNode.removeClass("userText");
			
		}
	});
});

CSS代码：

.userText {
	/*控制文本框的边框是红色的实线*/
	border: 1px solid red;
	background-image: url(../images/userVerify.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

HTML代码：

<html>
	<head>
		<title>JQuery实战1-用户名校验</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/userVerify.css" mce_href="css/userVerify.css" />
		<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script>
		<mce:script type="text/javascript" src="js/userVerify.js" mce_src="js/userVerify.js"></mce:script>
	</head>
	<body>
		请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
		<div id="result"></div>
	</body>
</html>

服务端JAVA代码：

response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("userName");
            if (param == null || param.length() == 0) {
                out.println("用户名不能为空");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                if (userName.equals("wangxingkui")) {
                    out.println("用户名[" + userName + "]已经存在，请使用别的用户名注册");
                } else {
                    out.println("可以使用用户名[" + userName + "]注册");
                }
            }
        } finally { 
            out.close();
        }

学习总结：

1） HTML负责页面，CSS负责样式，JS负责页面行为；

2）可以预先定义DIV或者SPAN节点来显示服务端返回的数据；

3）可以通过#idname或者.classname来定制HTML页面的样式；

4）可以通过$(document).ready(function(){ })的方式来定义页面装载完成后需要执行的方法；

5）可以通过$()来获取页面的指定节点，参数是某种CSS的选择器。例如：$("#username")获取页面上ID为username的节点；

$("table tr")获取table元素节点下所有的tr节点；

6）可以在$()返回的JQuery对象上执行各种JQuery的方法。例如：$("#verifyButton").click(function(){});

7） val()方法可以获得节点的value属性值；

8） html()方法可以获得某个节点中的html内容；

9） click()方法可以相应鼠标点击事件；

10） keyup()方法可以相应键盘弹起事件；