jQuery—— jQuery get方法+一般处理程序处理文本框内容

最新推荐文章于 2022-12-07 18:01:22 发布

YQAG

最新推荐文章于 2022-12-07 18:01:22 发布

阅读量2.7k

点赞数 2

文章标签： jquery javascript

本文链接：https://blog.csdn.net/suneqing/article/details/27646969

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网上经常看到这样的交互方式，当去一个网站注册用户名的时候，如果文本框内没有输入数据，或者数据输入的内容格式不对，就会将文本框变成红色来提示你输入的内容有误。

自己将这个文本框验证的方式改变了一下，并用到了get方法进行数据处理：1.点击提交按钮时如果文本框为空，文本框就会变成红色边框。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>
        请输入用户名：
        <input id="txtUserName" type="text"/><input id="btnOk" type="button" value="提交" />
    </div>
        <div id="result">
        </div>
    </form>
</body>

js代码：注册了两个事件1.提交按钮单击事件。2.文本框keyup事件。

$(document).ready(function () { 
    //找到button按钮，注册事件
    $('#btnOk').click(function () {
        //找到txtUserName文本框
        var txtUser = $("#txtUserName");
        //获取文本框内容
        var userName = txtUser.val();
        //将这个内容发给服务器
        if (userName.trim() == "") {   //判断文本框内容是否为空
            $("#txtUserName").addClass("usertext")//向文本框中添加class，改变文本框样式
        } else {
            //利用get方法调用服务端
            $.get("HtmlPage1.ashx", { username: userName }, function (data) {
                //接受服务器的返回的数据将数据返回到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

YQAG

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
25
评论
jQuery—— jQuery get方法+一般处理程序处理文本框内容

自己将这个文本框验证的方式改变了一下，并用到了get方法进行数据处理：1.点击提交按钮时如果文本框为空，文本框就会变成红色边框。2.当再次输入时文本框红色边框消失，输入后点击提交。3.利用jquery的get方法调用后台一般处理程序，处理前台的数据，处理后将值返回到前台。
复制链接

扫一扫

专栏目录