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

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

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

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

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

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

图1

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

代码

在页面上添加上述功能后，似乎效果并没有如预期的一样，我们还需要通过CSS样式对TextBox的样式进行处理，实现思路：

1、将TextBox的边框设为1px并将颜色设为红色。

2、浪线用一幅背景图片，并将图片的位置控制在下端显示。

3、html中添加如下代码引入样式

建立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相关代码。

代码

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

JQuer实战第一讲：验证用户名是否可用相关推荐

ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
案例：验证用户名是否可用
案例:验证用户名是否可用 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
javascript实战第一讲：聊天窗口
javascript实战第一讲:聊天窗口第一种方式:实现聊天功能的javascipt: <script> window.οnlοad=function(){ //页面加载完毕后,执行下面 ...
ajax向服务端发送请求验证用户名是否可用小示例
使用ajax向服务器发送请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
微信小程序实战第一讲
为方便参考及学习,特意将项目放在了github上托管公开,本系统教程不为别的,其一是为了巩固自学研究,其二也是为新上路的同学提供一点学习帮助,不吝赐教.供大家参考.https://github.com ...
jQuery验证用户名是否可用
HTML代码 Java代码 web.xml配置
jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回 ...
利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）
3.6.2 利用Ajax验证注册用户名(1) 由于注册的用户比较多,如果能在客户端还没提交注册表单之前验证用户名是否可用,如果不可用则禁止提交,这样将大大减少网络流量和服务器负载.本节将介绍如何利用 ...

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

JQuer实战第一讲：验证用户名是否可用相关推荐

最新文章

热门文章