JQuer实战第一讲：验证用户名是否可用

使用JQuery好久了，但每次都是现用现查，或者找些相关的插件。从来没系统的学习过。本身对JavaScript就有一种莫明的惧怕，虽然每次都认真的看，但有些东西总是记不住。似乎大脑就不记这些相关的东西，最近抽出点时间把《JQuery基础》看完了，看的时候很清楚，代码读的也不错。就是过阶段在用时又忘记了。是不是老了，我才26啊。现在正在看《JQuery in Action》虽然是英文版，但看起来还是不错。无意间在网上看到王兴魁老师讲的JQuery实站视频。豁然开朗，思路也比较清晰。将视频中讲到的实例通过文字的形式再次表现。只为以后查询之用。由于本人不善于言辞。固通过代码加注释的方式展式。

Demo名称：验证注册用户名是否可用

实现思路：1、当Button按钮被按下时，需要将文本框中的数据获取到，并发送到服务器端，最后接受服务器返回的数据。填充到预留的div中，显示结果。

2、文本框中当有按键按下之后，需要判断文本框中的内容是否为空。如果不为空，红色的边框和背景图就取消，否则保留。

写程序关键是思路，只要思路正确，无论你用什么技术都可以去实现。这就是为什么说写程序之前要多想而不是拿过来就写。有了上述思路后，我们首先进行第一步：页面的设计

        

       

                      图1

如图1所示，实现上述效果并不难，首先，我们建立TestDemo.aspx文件。关在此文件的html文件中实现上述效果，代码如下：

    

代码

< body >
     < 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中添加如下代码引入样式

     

< link rel = " Stylesheet "  href = " Css/testCss.css "  type = " text/css "  media = " screen "   />

 

建立testCss.css样式文件：

    

代码

.userText{
     /* 控制文本边框是红色的实线 */
    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/jquery.js " ></ script >
< 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中加入如下代码

代码

        string  userName  =  Request.QueryString[ " userName " ].ToString();
         if  (userName  ==   " mzoy " )
        {
            Response.Write( " 用户名已经存在！ " );
        }
         else
        {
            Response.Write( " 您可以使用此用户名！ " );
        }

此处如果您想扩展，就在此处加些访问数据库的一些相关操作。

 

      这样，一个利用JQuery来实现的，具有验证功能的程序就写完了，虽然很简单，但对于理解JQuery的代码还是有一定帮助的。分别在IE7及Firefox中测试通过。测度过程中建议大家安装多个浏览器进行测试。同时，如果想深入学习JS安装Firebug组件是很有必要的。它不仅可以帮助我们进行断点调式，对于理解JQuery中的选择器及DOM的概念很有帮助。具体操作方法请参考Javascript调试利器：Firebug使用详解

 

 

 

作者：mzoyLee
出处：http://www.cnblogs.com/mzoylee
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。  

转载于:https://www.cnblogs.com/mzoylee/archive/2009/12/27/1633432.html