使用jquery+ajax方式实现用户注册时，检测用户名是否存在

最新推荐文章于 2022-01-13 18:01:14 发布

小龙卷卷风

最新推荐文章于 2022-01-13 18:01:14 发布

阅读量7.8k

点赞数

分类专栏： jQuery 文章标签： jquery ajax function xhtml button border

本文链接：https://blog.csdn.net/deron7/article/details/7051042

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用jquery+ajax方式实现用户注册时，检测用户名是否存在

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用jquery+ajax方式实现用户注册时，检测用户名是否存在</title>
    <style type="text/css">
      /*
        当用户没有输入用户名，设置text边框为红色，否则为默认样式。
      */
    .UserText
    {
      border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //给检验按钮注册事件
            $('#Regist').click(function () {
                var userName = $('#UserName').val();
                if ($.trim(userName) == "") { //用户输入不能为空或空格.
                    alert("用户名不能为空");
                }
                else {
                    //后台处理数据验证
                    $.get("jquery/UserRegist.aspx", { userName: userName }, function (data) {
                        $('#divMsg').html(data); //接受服务器处理返回数据，填充在div中
                    });
                }
            });
            //注册文本框事件
            $('#UserName').keyup(function () {
                var username = $(this).val();//获取当前文本框内容
                if ($.trim(username) == "") {
                    $(this).addClass('UserText');//为空时添加红色边框
                }
                else {
                    $(this).removeClass('UserText');//不为空则移除
                }
            });
        });
    </script>
</head>
<body>
请输入用户名：<input type="text" id="UserName"/>
<input type="button" id="Regist" value="检验" />
<div id="divMsg"></div>
</body>
</html>

小龙卷卷风

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
使用jquery+ajax方式实现用户注册时，检测用户名是否存在

使用jquery+ajax方式实现用户注册时，检测用户名是否存在使用jquery+ajax方式实现用户注册时，检测用户名是否存在 /* 当用户没有输入用户名，设置text边框为红色，否则为默认样式。 */ .UserText { border:1px solid red;
复制链接

扫一扫