jQuery入门之一:校验文本,页面提示

一:前台显示:

UTF-8编码

引入自定义css (输入框没有信息时 ,用红色提示)

引入自定义js,userVerify.js(用于和服务器端数据交互)

引入jQuery库

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

需要校验的就一个文本框

	请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
		<div id="result"></div>

id留给jQuery取值, class留给css加载效果

div留给jQuery返回处理结果

二: css

用class选择器, 红色边框,

需要添加的图片是一个波浪线 , 横向重复排列 , 放置在底部

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

三:jQuery

1.整段代码需要在页面加载完成之后进行加载,所以都包含在:$(document).ready(function() {}); 之中

jQuery整体的语法风格就是: $符号(括号里是html元素) . jQuery方法名( 传参是 js的function{})

2.通过id找到按钮,然后在点击操作时执行语句:$("#verifyButton").click(function())

感觉像是代替onClick()

3.还是通过id找到文本,用.val()方法就可以拿到里边的值 $("#userName").val()

4.$.get (url,success,callback)用来给服务器端发送数据,

5.拿到返回值后, 通过id找到div,然后输出显示:$("#result").html(response);

6.$("#userName").keyup(function(){}) 是在该文本框里写入任何值的时候执行的

7..addClass("userText");和.removeClass 是添加和删除css样式

$(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");
			
		}
	});
});

四:后台action

例子里是用的servlet ,大同小异,就是通过request接收到值 ,然后用response返回结果

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