网上常常看到这种交互方式，当去一个站点注冊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. ALTER OPERATOR CLASS - 修改一个操作符表的定义

    SYNOPSIS ALTER OPERATOR CLASS name USING index_method RENAME TO newname DESCRIPTION 描述 ALTER OPERATO ...

  2. Java 字符串格式化 String.format() 的使用

    常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得c语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...

  3. CAD使用GetxDataLong读数据（com接口）

    主要用到函数说明: MxDrawEntity::GetxDataLong2 读取一个Long扩展数据,详细说明如下: 参数 说明 [in] LONG lItem 该值所在位置 [out, retval ...

  4. 关于Maven项目的pom.xml中的依赖或插件失效的解决方法

    1.请将<dependency>标签包含的依赖从<dependencyManagement>中拿出来,单独放在<dependencies>标签里面.2.请将< ...

  5. spring的IOC的简单理解

    之前看了一下源码,看的挺吃力,只能是慢慢看了. 简单说一下springIOC的我的理解,IOC也叫控制反转,可以有效的减低各个组件之间的耦合度 想象一下,如果不用IOC,那么系统里面会有大量的new ...

  6. [Python3网络爬虫开发实战] 2.5-代理的基本原理

    我们在做爬虫的过程中经常会遇到这样的情况,最初爬虫正常运行,正常抓取数据,一切看起来都是那么美好,然而一杯茶的功夫可能就会出现错误,比如403 Forbidden,这时候打开网页一看,可能会看到“您的 ...

  7. python3.x Day6 多线程

    线程???进程????区别???何时使用??? 进程:是程序以一个整体的形式暴露给操作系统管理,里边包含了对各种资源的调用,内存的使用,对各种资源的管理的集合,这就叫进程 线程:是操作系统最小的调度单 ...

  8. token 的生成杂谈

    背景 很多时候我们需要用 token 来作为一些标识, 比如: 一个用户登录后的认证标识. 实现方式 md5 的方式: $v = 1; // 自己定义的 需要hash 的value 值 $key = ...

  9. Fiddler基本用法:手机抓包1

    Fiddler基本用法以及如何对手机抓包 一.Fiddler是什么? ·一种Web调试工具. ·可以记录所有客户端和服务器的http和https请求. ·允许监视.设置断点.修改输入输出数据. 官方文 ...

  10. centos相关

    查看虚拟机里的Centos7的IP:ip addr或者ifconfig  ---https://blog.csdn.net/dancheren/article/details/73611878 Cen ...