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

最新推荐文章于 2019-08-27 13:45:22 发布

mzoy

最新推荐文章于 2019-08-27 13:45:22 发布

阅读量2.2k

点赞数

分类专栏： JavaScript/AJAX 文章标签： jquery textbox function firebug 服务器 stylesheet

本文链接：https://blog.youkuaiyun.com/mzoy/article/details/5086561

版权

JavaScript/AJAX 专栏收录该内容

54 篇文章

订阅专栏

JQuery验证用户名是否可用！

使用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使用详解