jQuery—— jQuery get方法+一般处理程序处理文本框内容
网上常常看到这种交互方式，当去一个站点注冊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方法将文本框中的内容，传入后台进行处理。
jQuery—— jQuery get方法+一般处理程序处理文本框内容的更多相关文章
- php锁定文本框内容的方法
有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...
- TEXT文本编辑框4 点击按钮读取文本框内容到内表
*&---------------------------------------------------------------------* *& Report ZTEST_CWB ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- python selenium无法清除文本框内容问题
正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...
- 同步文本框内容的JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)
input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...
- C# 全选中数字文本框内容
/// <summary> /// 全选中数字文本框内容 /// </summary> /// <param name=&quo ...
- pyqt5实现注册界面并获得文本框内容
获取框里面的内容,有一个BUG,搞了好久才搞定. __author__ = 'ayew'import sysfrom PyQt5.QtCore import*from PyQt5.QtWidgets ...
- python开发_tkinter_获取文本框内容_给文本框添加键盘输入事件
在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...
随机推荐
- win7电脑桌面壁纸曝光过高影响图标怎么办？亲测实用解决方法
现在用win7系统的人应该还是挺多的吧,虽然说windows家族已经升级到现在的win11了,相信大多数人家用的电脑系统还是win7吧,今天要讲的是一个壁纸曝光度过高的解决办法,虽然还不清楚为什么,但 ...
- 初学者对C++的切身感受
上周和一同学聊起了当前一些比较流行且运用广范的编程语言,苹果的IOS比起其它语言 来说更加言简意赅,简单明了,并且他现在也打算一直弄IOS.我之前一直是用C语言和 GNU ARM汇编语言,因为这两种语 ...
- 判断Exe(DLL)和符号文件是否匹配---验证模块和符号文件是否匹配的工具和方法
当我们进行程序调试时,有时调试器会直接告诉你符号文件不对,或则显示出的调用栈不对,当你怀疑符号文件不匹配时,如何确定呢? 如果是用windbg调试,请用 !chksym 模块名比如,匹配的时候 不匹 ...
- 10CSS高级滤镜
CSS高级滤镜 滤镜特效的应用 filter:滤镜属性(参数1,参数2,……) filter是滤镜属性选择符. 透明度——alpha opacity代表透明度等级,参数值从0到100,从完全透明 ...
- Analysis Of The Causes Of Internal Symmetry Of Hydraulic Motor
The main reasons why hydraulic motors have this symmetrical internal structure are as follows: The ...
- Bzoj4899 记忆的轮廓
B. 记忆的轮廓 题目描述 通往贤者之塔的路上,有许多的危机.我们可以把这个地形看做是一颗树,根节点编号为1,目标节点编号为n,其中1-n的简单路径上,编号依次递增,在[1,n]中,一共有n个节点.我 ...
- 新引入thinkphp报错“应用目录[./Application/]不可写，目录无法自动生成！ 请手动生成项目目录~”
新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”, 其主要原因是文件夹的权限问题,手动将项目文件夹权限更改为可读可写就OK,具体操 ...
- CSU 2018年12月月赛 F(2218): Finding prime numbers
Description xrdog has a number set. There are 95 numbers in this set. They all have something in com ...
- [Python3网络爬虫开发实战] 1.8.1-pyspider的安装
pyspider是国人binux编写的强大的网络爬虫框架,它带有强大的WebUI.脚本编辑器.任务监控器.项目管理器以及结果处理器,同时支持多种数据库后端.多种消息队列,另外还支持JavaScript ...
- MongoDB中mapReduce的使用
MongoDB中mapReduce的使用 制作人:全心全意 mapReduce的功能和group by的功能类似,但比group by处理的数据量更大 使用示例: var map = function ...