JQuery基础入门-输入验证

以前对JQuery一直保持观望态度，没太深入研究。最近一个项目，到现在第一阶段算是快完成了，发现和同事的javascript代码功能重复的很多，重用性也不好，冗余代码也很多，才想到了转用JQuery开发框架。找了点资料来看了下，发现JQuery相当强大，真是相见恨晚啦！

这篇教程是最基础的JQuery入门教程。为了刚接触JQuery的人能看懂，代码写的比较繁琐，主要是为了写注释方便，如果看了还有不懂的可以联系我，大家共同探讨.

代码点击可以直接下载看效果，注意js文件结构，js文件（包括jquery.js）要放在js文件夹下面，jquery.js大家可以到Jquery的官网去下载：jquery.com

html文件：

^?Download verify.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>输入验证</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery.js" type="text/javascript" ></script>
    <script src="js/verify.js" type="text/javascript" ></script>
 
 
    <style type="text/css">
<!--
.warning{
	border:1px  solid red;
}
-->
    </style>
  </head>
 
  <body>
    请输入用户名：
    <input type="text" name="userName" id="userName" ><input id="verify" type="button" value="verify">
    <div id="show"></div>
  </body>
</html>

js文件：

^?Download verify.js

//初始化，$(document).ready()表示页面加载完成后执行
$(document).ready(function(){
 
 
	//找到页面上id为verify的按钮。并为它添加点击事件,click为jquery的点击事件
	$("#verify").click(function(){
		//当按钮点击的时候执行下面的代码
		//找到页面上id为userName的文本框，并获取文本框内的值，用jquery提供的val方法
		var userName=$("#userName").val();
		//判断userName的值是不是为空
		if(userName=="")
		{
			//如果为空，提示用户
			$("#show").html("用户名不能为空");
		}else{
			//如果不为空，则将userName的值发送给服务器端，校验是否重复等，这里简化操作，直接判断如果userName的值为admin，则提示用户名重复
		/**	
			//如果使用服务器端来校验userName，使用juery提供的get方法，get方法的有三个参数，第一个是服务器端的url，
			// 第二个是发送给服务器端的数据，这里我的数据直接在前面的url中已经传递过去，所以为null，
			// 第三个参数是一个function，它表示服务器端校验完成，返回后需要调用的函数
			$.get("verify.action?userName="+userName,null,function(response){
				//将服务器端返回的值显示在div中
				$("#show").html(response);
			});
			*/
			if(userName=="admin")
			{
					$("#show").html("用户名已经存在");
			}else
			{
					$("#show").html("恭喜您，该用户名可以注册");
			}
		}
 
	});
 
	//找到页面上id为userName的输入框，并为它添加键盘出发事件，keyup为jquery的键盘触发事件，表示键盘上某个键被按下后弹起来后触发
	$("#userName").keyup(function(){
		//找到页面上id为userName的文本框，并获取文本框内的值，用jquery提供的val方法
		var userName=$("#userName").val();
		//如果userName的值内空，则文本框显示红色
		if(userName=="")
		{
			//addClass是JQuery提供的方法，表示给某个页面控件添加一个class
			$(this).addClass("warning");
		}else
		{
			//removeClass是JQuery提供的方法，表示给某个页面控件删除class
			$(this).removeClass("warning");
		}
 
	});
});