JQuer实战第一讲：验证用户名是否可用
使用JQuery好久了，但每次都是现用现查，或者找些相关的插件。从来没系统的学习过。本身对JavaScript就有一种莫明的惧怕，虽然每次都认真的看，但有些东西总是记不住。似乎大脑就不记这些相关的东西，最近抽出点时间把《JQuery基础》看完了，看的时候很清楚，代码读的也不错。就是过阶段在用时又忘记了。是不是老了，我才26啊。现在正在看《JQuery in Action》虽然是英文版，但看起来还是不错。无意间在网上看到王兴魁老师讲的JQuery实站视频。豁然开朗，思路也比较清晰。将视频中讲到的实例通过文字的形式再次表现。只为以后查询之用。由于本人不善于言辞。固通过代码加注释的方式展式。
Demo名称：验证注册用户名是否可用
实现思路：1、当Button按钮被按下时，需要将文本框中的数据获取到，并发送到服务器端，最后接受服务器返回的数据。填充到预留的div中，显示结果。
2、文本框中当有按键按下之后，需要判断文本框中的内容是否为空。如果不为空，红色的边框和背景图就取消，否则保留。
写程序关键是思路，只要思路正确，无论你用什么技术都可以去实现。这就是为什么说写程序之前要多想而不是拿过来就写。有了上述思路后，我们首先进行第一步：页面的设计
图1
如图1所示，实现上述效果并不难，首先，我们建立TestDemo.aspx文件。关在此文件的html文件中实现上述效果，代码如下：
代码
<form id="form1" runat="server">
<div>
用户名：<input type="text" id="txtUserName" class="userText" />
<input type="button" id="btnSubmit" value="验证" />
</div>
<div id="msg"> </div>
</form>
</body>
在页面上添加上述功能后，似乎效果并没有如预期的一样，我们还需要通过CSS样式对TextBox的样式进行处理，实现思路：
1、将TextBox的边框设为1px并将颜色设为红色。
2、浪线用一幅背景图片，并将图片的位置控制在下端显示。
3、html中添加如下代码引入样式
建立testCss.css样式文件：
代码
/*控制文本边框是红色的实线*/
border:1px solid red;
/*添加textbox中的浪线*/
background-image:url(../Images/background.jpg);
/*横向平铺*/
background-repeat:repeat-x;
/*控制显示的位置*/
background-position:bottom;
}
上述文件完成后，编译运行即可出现如图1的效果。按照既定思路，进一步完善验证功能。
1、 首先在html中引入JQuery.js文件引入所需要的类库，并建立vailty.js文件，用于编写JQuery相关代码。
代码
<script type="text/javascript"src="JScript/TestJS/IntellisenseDemo.js"></script>
<script type="text/javascript" src="JScript/TestJS/vailty.js"></script>
Vailty.js代码如下：
代码
$(document).ready(function() {
//这里面的内容就是页面装载完成后需要执行的代码
//需要找到button按钮，注册事件
var userNameVal = $("#txtUserName");
//先找到某个结点，在去执行操作
$("#btnSubmit").click(function() {
//1、获取文本框的内容
var userName = userNameVal.val();
//2、将这个内容发送给服务器端
if (userName == "") {
alert("用户名不能为空！");
} else {//get想关参数请参考JQuery API
$.get("DefaultVerify.aspx?userName=" + userName, null, function(response) {
//3、接收服务器端返回的数据，填充到div中
$("#msg").html(response);
});
}
});
//需要长到文本框注册事件
userNameVal.keyup(function() {
//获取当前文本框中的内容
var value = userNameVal.val();
if (value == "") {
//让边框变成红色，并且带有背景图
userNameVal.addClass("userText");
}
else {
//去掉边框红色及背景图
$(this).removeClass("userText");
}
});
});
按照我们当初的思路，上述代已经满足了我们的要求，由于我是在ASP.NET平台下开发，所以我们还需要建立一个文件DefualtVerity.aspx文件，用以处理服务器的想关请求，这里我们只写一些象征性的代码。完善功能。在DefualtVerity.aspx的Page_load中加入如下代码
代码
if (userName == "mzoy")
{
Response.Write("用户名已经存在！");
}
else
{
Response.Write("您可以使用此用户名！");
}
此处如果您想扩展，就在此处加些访问数据库的一些相关操作。
这样，一个利用JQuery来实现的，具有验证功能的程序就写完了，虽然很简单，但对于理解JQuery的代码还是有一定帮助的。分别在IE7及Firefox中测试通过。测度过程中建议大家安装多个浏览器进行测试。同时，如果想深入学习JS安装Firebug组件是很有必要的。它不仅可以帮助我们进行断点调式，对于理解JQuery中的选择器及DOM的概念很有帮助。具体操作方法请参考Javascript调试利器：Firebug使用详解
作者：mzoyLee
出处：http://www.cnblogs.com/mzoylee
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
