使用javascript在单击按钮时添加类

我试图在javascript中检查用户名是否可用，但当用户直接点击按钮而不在文本框中输入任何内容时，它会显示我可用

因此，当用户没有在文本框中输入任何内容并点击按钮时，我想发出“请输入一些文本”消息。 那我该怎么做呢

这是我的密码：

<script type="text/javascript">
    $(function () {
        $("#<% =btnavailable.ClientID %>").click(function () {
            $("#dvMsg").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
            $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) {
                if (result == "1") {
                    $("#dvMsg").html('Already exists!').addClass('messageboxerror').fadeTo(900, 1);
                }
                else if (result == "0") {
                    $("#dvMsg").html('Available').addClass('messageboxok').fadeTo(900, 1);
                }
                else {
                    $("#dvMsg").html("Error!").addClass('messageboxerror').fadeTo(900, 1);
                }
            });

        });
        $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) {
            alert("Error requesting page " + settings.url + " Error:" + error);
        });

    });
</script>

$（函数（）{
$（“#”）单击（函数（）{
$（“#dvMsg”）.removeClass（）.addClass（'messagebox'）.text（'Checking…'）.fadeIn（“slow”）；
$.post（“LoginHandler.ashx”，{uname:$（“#”）.val（）}，函数（结果）{
如果（结果=“1”）{
$（“#dvMsg”）.html（'ready exists！'）.addClass（'messageboxerror'）.fadeTo（900,1）；
}
否则如果（结果=“0”）{
$（“#dvMsg”）.html（'Available'）.addClass（'messageboxok'）.fadeTo（900,1）；
}
否则{
$（“#dvMsg”）.html（“Error！”）.addClass（'messageboxerror'）.fadeTo（900,1）；
}
});
});
$（“#”）ajaxError（函数（事件、请求、设置、错误）{
警报（“请求页面出错”+settings.url+“错误：+Error”）；
});
});

这是我的Css：

<style>
   .messagebox {
       position:absolute;
       width:100px;
       margin-left:30px;
       border:1px solid #c93;
       background:#ffc;
       padding:3px;
   }
   .messageboxok {
       position:absolute;
       width:auto;
       margin-left:30px;
       border:1px solid #349534;
       background:#C9FFCA;
       padding:3px;
       font-weight:bold;
       color:#008000;
   }
   .messageboxerror {
       position:absolute;
       width:auto;
       margin-left:30px;
       border:1px solid #CC0000;
       background:#F7CBCA;
       padding:3px;
       font-weight:bold;
       color:#CC0000;
   }
   #dvMsg {
       height: 15px;
       width: 142px;
       z-index: 1;
       left: 172px;
       top: 126px;
       position: absolute;
   }
</style>

.messagebox{
位置：绝对位置；
宽度：100px；
左边距：30px；
边框：1px实心#c93；
背景：#ffc；
填充：3倍；
}
.messageboxok{
位置：绝对位置；
宽度：自动；
左边距：30px；
边框：1px实心#349534；
背景：C9FFCA；
填充：3倍；
字体大小：粗体；
颜色：#008000；
}
.MessageBoxer错误{
位置：绝对位置；
宽度：自动；
左边距：30px；
边框：1px实心#CC0000；
背景：#F7CBCA；
填充：3倍；
字体大小：粗体；
颜色：#CC0000；
}
#dvMsg{
高度：15px；
宽度：142px；
z指数：1；
左：172px；
顶部：126px；
位置：绝对位置；
}

使用如下if语句：

if($("#yourUserNameTextFieldID").val().length > 0)
{ 
   //execute your test 
}
else
{
   // show a message
} 

---

您还可以测试服务器端。

验证txtUserName是否为空并显示消息

<script type="text/javascript">
   $(function () {
      $("#<% =btnavailable.ClientID %>").click(function () {
        if ($("#<% =txtUserName.ClientID %>").val() == "") {
           $("#dvMsg").removeClass().addClass('messageboxerror').text('please enter some text').fadeIn("slow");
        } else {
           $("#dvMsg").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
           $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) {
             if (result == "1") {
                 $("#dvMsg").html('Already exists!').addClass('messageboxerror').fadeTo(900, 1);
             }
             else if (result == "0") {
                 $("#dvMsg").html('Available').addClass('messageboxok').fadeTo(900, 1);
             }
             else {
                 $("#dvMsg").html("Error!").addClass('messageboxerror').fadeTo(900, 1);
             }
          });
        }
    });

    $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) {
        alert("Error requesting page " + settings.url + " Error:" + error);
    });
 });
</script>

$（函数（）{
$（“#”）单击（函数（）{
if（$（“#”）val（）=“”）{
$（“#dvMsg”）.removeClass（）.addClass（'messageboxerror'）.text（'please enter some text'）.fadeIn（“slow”）；
}否则{
$（“#dvMsg”）.removeClass（）.addClass（'messagebox'）.text（'Checking…'）.fadeIn（“slow”）；
$.post（“LoginHandler.ashx”，{uname:$（“#”）.val（）}，函数（结果）{
如果（结果=“1”）{
$（“#dvMsg”）.html（'ready exists！'）.addClass（'messageboxerror'）.fadeTo（900,1）；
}
否则如果（结果=“0”）{
$（“#dvMsg”）.html（'Available'）.addClass（'messageboxok'）.fadeTo（900,1）；
}
否则{
$（“#dvMsg”）.html（“Error！”）.addClass（'messageboxerror'）.fadeTo（900,1）；
}
});
}
});
$（“#”）ajaxError（函数（事件、请求、设置、错误）{
警报（“请求页面出错”+settings.url+“错误：+Error”）；
});
});

@user944919您可以使用“批准答案”按钮：）