网上常常看到这种交互方式，当去一个站点注冊username的时候，假设文本框内没有输入数据，或者数据输入的内容格式不正确。就会将文本框变成红色来提示你输入的内容有误。

自己将这个文本框验证的方式改变了一下，并用到了get方法进行数据处理：1.点击提交button时假设文本框为空，文本框就会变成红色边框。2.当再次输入时文本框红色边框消失。输入后点击提交。

3.利用jquery的get方法调用后台一般处理程序，处理前台的数据，处理后将值返回到前台。

代码：

html代码：

<body>

		<link type="text/css" rel="stylesheet" href="css/userVerify.css" />

		<script type="text/javascript" src="js/jquery.js"></script>

		<script type="text/javascript" src="js/userVerify.js"></script>

    <form id="form1" runat="server">

    <div>

        请输入username：

        <input id="txtUserName" type="text"/><input id="btnOk" type="button" value="提交" />

    </div>

        <div id="result">

        </div>

    </form>

</body>

js代码：注冊了两个事件1.提交button单击事件。

2.文本框keyup事件。

$(document).ready(function () {

    //找到button按钮，注冊事件

    $('#btnOk').click(function () {

        //找到txtUserName文本框

        var txtUser = $("#txtUserName");

        //获取文本框内容

        var userName = txtUser.val();

        //将这个内容发给server

        if (userName.trim() == "") {   //推断文本框内容是否为空

            $("#txtUserName").addClass("usertext")//向文本框中加入class，改变文本框样式

        } else {

            //利用get方法调用服务端

            $.get("HtmlPage1.ashx", { username: userName }, function (data) {

                //接受server的返回的数据将数据返回到div中

                $("#result").html(data);

            });

        }

    });

    //找到txtUserName文本框。注冊事件

    $('#txtUserName').keyup(function () {

        //获取当前文本框中内容

        var value = $(this).val();

        if (value!="") {

            //去除文本框class。边框红色样式消失

            $(this).removeClass("usertext");

        }

    });

});

一般处理程序代码：

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string strUserName = context.Request.QueryString["username"]; //获取前台的username

            if (strUserName == "yq")

            {

                context.Response.Write("该用户以存在");   //返回数据

            }

            else

            {

                context.Response.Write("欢迎用户：" + strUserName);   //返回数据

            }

        }

css代码：

.usertext {

    border:1px solid red;

    /*控制文本框以下的波浪形*/

    background-image:url(../imge/userVerify.gif);

    background-repeat:repeat-x;

    background-position:bottom;

}

总结：

整个实例代码中。能够分为两部分：1.利用 jQuery的removeClass，addClass方法去控制文本框的样式。

2.利用jQuery的get方法将文本框中的内容，传入后台进行处理。

源代码地址：http://download.csdn.net/detail/suneqing/7424611

jQuery—— jQuery get方法+一般处理程序处理文本框内容的更多相关文章

  1. php锁定文本框内容的方法

    有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...

  2. TEXT文本编辑框4 点击按钮读取文本框内容到内表

    *&---------------------------------------------------------------------* *& Report ZTEST_CWB ...

  3. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  4. python selenium无法清除文本框内容问题

    正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...

  5. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  7. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  8. pyqt5实现注册界面并获得文本框内容

    获取框里面的内容,有一个BUG,搞了好久才搞定. __author__ = 'ayew'import sysfrom PyQt5.QtCore import*from PyQt5.QtWidgets ...

  9. python开发_tkinter_获取文本框内容_给文本框添加键盘输入事件

    在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...

随机推荐

  1. 迅为I.MX6DL开发板飞思卡尔Freescale Cortex A9 迅为-iMX6双核核心板

    核心板参数 尺寸: 51mm*61mm CPU: Freescale Cortex-A9 双核精简版 i.MX6DL,主频 1.2 GHz 内存: 1GB DDR3 存储: 8GB EMMC 存储 E ...

  2. jQuery 点击 星星评分

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 查看MySQL默认字符集

    MySQL默认字符集相信大家都有所了解,下面就为您介绍一下查看MySQL默认字符集的命令,希望对您学习MySQL默认字符集能有些帮助. MySQL的字符集支持(Character Set Suppor ...

  4. windows sdk编程禁止窗体最大化最小化

    #include <windows.h> /*消息处理函数声明*/ HRESULT CALLBACK WindowProc(HWND hwnd, UINT message, WPARAM ...

  5. JavaSE-12 面向对象程序设计的几条基础原则

    摘取代码中变化的行为,形成接口 在设计基类的时候,如果该类某个成员方法在子类中的实现变化差别比较大(一部分子类实现该方法是相同的),作为基类有两个问题:一是该方法不再通用:二是子类如果重写该方法,存在 ...

  6. 【C语言】控制台窗口图形界面编程（四）：文本输出

    目录 00. 目录 01. FillConsoleOutputAttribute函数 02. FillConsoleOutputCharacter函数 03. WriteConsoleOutputCh ...

  7. eclipse包分层

    方法很简单,如下图所示: 1.点击项目栏窗口的右上角的倒三角 2.选择Pachage Presentation(包呈现) 3.选择Hierarchical(分层)

  8. Android-ViewPagerIndicator框架使用——CirclePageIndicator

    前言:Circle适用于应用新功能的展示页和商品的多张图片的展示功能. 1.定义布局文件:SampleCirclesDefault中添加了一个布局:simple_circles. 布局中定义一个Lin ...

  9. 路径工具类NSPathUtilities

    路径工具类NSPathUtilities.h 路径类NSPathUtilities.h包含了 NSString的函数和分类扩展,他允许你操作路径名.应该竟可能的使用这些函数,以便使程序更独立于文件系统 ...

  10. 数据库insert update select语句

    http://database.51cto.com/art/200903/113939_1.htm                   (更新语句) http://blog.csdn.net/chan ...