网上常常看到这种交互方式，当去一个站点注冊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. Windos无法验证文件数组签名

    参考链接:https://jingyan.baidu.com/article/09ea3ede6982c4c0aede39e6.html Windows无法验证文件数字签名而无法启动,照以下去做,可以 ...

  2. crontab 每月最后一天执行命令

    没有什么是解决不了的事情,如果有,只是我们的知识不够精通,学得不扎实 需求:有一个程序,需要在每个月的最后一天执行 例如:每个月的最后一天早上8:00 打印 dede 到  /tmp/test.txt ...

  3. WPF小记 -- 使用Path自己画图标，点击命中(焦点)丢失问题

    在Template中,Path外面的Grid需添加Background属性值.否则点击范围会受限制,例如:Click,在RadioButton的Height和With范围内点击,命中率<1. & ...

  4. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  5. 07CSS表格

    CSS表格 表格边框 如需在 CSS 中设置表格边框,请使用 border 属性. table, th, td { border: 1px solid blue; } 折叠边框 border-coll ...

  6. jquery.data.resource.js

    /*! * jQeury Data Pkugin * version: 1.0.0-2016.03.03 * Requires jQuery v1.10.2 or later * Copyright ...

  7. fastclick.js插件使用

    引入插件步骤 ①在HTML页面中添加  <script type='application/javascript' src='/path/to/fastclick.js'></scr ...

  8. CSU2179: 找众数

    Description 由文件给出N个1到30000间无序数正整数,其中1≤N≤10000,同一个正整数可能会出现多次,出现次数最多的整数称为众数.求出它的众数及它出现的次数. Input 输入文件第 ...

  9. 2 SQL 查询基础

    2 查询基础 2-1 SELECT语句基础 通过SELECT语句查询并选取必要数据的过程称为匹配查询或查询(query). 子句是SQL语句的组成要素,是以SELECT或者FROM等作为起始的短语. ...

  10. Django 模版语法 二

    变量的过滤器(filter)的使用 过滤器:upper, lower, first, capfirst 在 views.py 中修改 from django.shortcuts import rend ...