jQuery小试之用户名校验-优快云博客

上篇博客《jQuery初探》简单介绍了jQuery相关内容，这次我们做一个简单的例子，体验一把jQuery的魅力。

我们想要达到的目的是：当文本框内容为空时，出现红色边框和红色波浪下划线提示；且内容为空时提交，提示“你什么都木有输入，提交什么？”；输入内容则红色框消失，下部出现提交内容。

前台界面：

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>用户名校验</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/userVerify.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/userVerify.js"></script>
	</head>
	<body>
		请输入用户名:
		<input type="text" id="userName" class="userText"/> <input type="button" value="提交" id="verifyButton" />
		<div id="result"></div>
	</body>
</html>

此处引用一下jQuery.js是必须的。

CSS代码：

.userText {
	/*控制文本框的边框是红色的实线*/
	border: 1px solid red;
        /*添加文本框下面的红色下划线*/
	background-image: url(../images/userVerify.gif);
        /*横向重复*/
	background-repeat: repeat-x;
        /*出现在底部*/
	background-position: bottom;
}

javascript代码：

$(document).ready(function() {
	//DOM装载完成后运行
        //获取文本框
	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");
			
		}
	});
});

部分运行结果图：

内容为空时：