Question

我正在尝试使用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>

这是我的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>

Answer 1

使用if语句：

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

您也可以测试服务器端。

Answer 2

验证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>

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

2 个答案: