网上常常看到这种交互方式，当去一个站点注冊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. c++通过管道pipe获取cmd输出的字符

    #include <stdio.h>#include<iostream>#include<string>using namespace std; // 描述:exe ...

  2. KVM环境下vCPU绑定到物理CPU

    在KVM环境中测试虚拟系统性能时,如果宿主机是有两个CPU socket的硬件,会碰到由于vCPU在不同物理CPU上浮动导致测试RFC2544时出现少量丢包的现象,测试结果非常不稳定.可以将vCPU绑 ...

  3. dll、lib（动态链接库、静态链接库）的区别

    1.dll:dynamic link library: lib:static link library. 2.windows系统中,许多app并不是仅由一个完整的exe构成,而是按功能分成了若干部分, ...

  4. CHECKPOINT - 强制一个事务日志检查点

    SYNOPSIS CHECKPOINT DESCRIPTION 描述 预写式日志(Write-Ahead Logging (WAL))缺省时在事务日志中每隔一段时间放一个检查点. (要调整这个原子化的 ...

  5. webpack的详细介绍和使用

    // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...

  6. hdfs深入：08、hdfs的JavaAPI以及如何解决winutils的问题

    /** * 通过url注册的方式访问hdfs,了解,不会用到 * @throws Exception */ 以下为详细代码://1.注册hdfs的url,让java代码能识别hdfs的url形式URL ...

  7. pytorch学习 中 torch.squeeze() 和torch.unsqueeze()的用法

    squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的 ...

  8. [LUOGU] P3354 [IOI2005]Riv 河流

    题目描述 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄--名叫 ...

  9. google查找笔记

    1.可以选择MDN.WIKI等权威的网址资料

  10. Buffer.from(arrayBuffer[, byteOffset[, length]])

    Buffer.from(arrayBuffer[, byteOffset[, length]]) arrayBuffer - 一个 TypedArray 或 new ArrayBuffer() 的 . ...