网上常常看到这种交互方式，当去一个站点注冊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. Importing Swift into Objective-C

    Overview You can work with types declared in Swift from within the Objective-C code in your project ...

  2. 5-Java-C（小题答案）

    1. a[i][j]=a[i-1][j-1]+a[i-1][j] 2.1835421 3.93 4.1572836

  3. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

  4. PyQt5实现第一个桌面应用程序

    import sysfrom PyQt5.QtWidgets import QApplication,QWidget,QDialogfrom PyQt5.QtCore import Qt if __n ...

  5. 关于nested exception is org.apache.ibatis.binding.BindingException:Parameter '***' not found报错解决

    几天晚上遇到的奇怪的问题  传入的参数名一直没有变   但是从mapper到xml似乎有一个找不到参数的报错,实际上只要在Mapper接口形参前加“@Param(“形参名称”)”就可以了

  6. python3+beautifulSoup4.6抓取某网站小说（三）网页分析，BeautifulSoup解析

    本章学习内容:将网站上的小说都爬下来,存储到本地. 目标网站:www.cuiweijuxs.com 分析页面,发现一共4步:从主页进入分版打开分页列表.打开分页下所有链接.打开作品页面.打开单章内容. ...

  7. cacheStorage缓存及离线开发

    案例地址:https://zhangxinxu.github.io/https-demo/cache/start.html 我们直接看一个例子吧,如下HTML和JS代码: <h3>一些提示 ...

  8. swiper 3D 覆盖流的使用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. Linux下启动tomcat报java.lang.OutOfMemoryError: PermGen space

    一.错误信息 java.lang.reflect.InvocationTargetException    at sun.reflect.NativeMethodAccessorImpl.invoke ...

  10. ecshop 修改支持php7 方案

    修改方法 http://jsb.php-php.com/2016/05/472/ 修改数据库配置 data/config.php