0

使用 VS 2010 开发 ASP.NET Web 窗体应用程序并在页面上有一个登录文本框和密码文本框。

在这些之上，我有一个简单的 div 标签，如果登录文本框或密码文本框为空，它将包含错误消息。

JSFIDDLE

<div id="ErrorDiv"></div>

如果任一文本框为空，我希望此 div 向下滑动显示错误消息

以下是我尝试过的 jQuery 代码：

<script>
$(function () {

    $("#btnLogin").click(function () {    
        var error = 0;

        if (error == 0) {
            $("#ErrorDiv").slideToggle();
        }

        if ($("#txtLoginID").val() == "") {   
            error = 1;
            $("#ErrorDiv").text("Please Enter LoginID");
        }

        if ($("#txtPassword").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter Password");
        }

        if (error == 1) {
            alert(document.getElementById("ErrorDiv").value());        
            $("#ErrorDiv").show(); 
        }

        else {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").slideUP();
        }  
    });   
});
</script>

这不起作用。

我也尝试替换 $("#ErrorDiv").text("Please Enter LoginID");为，$("#ErrorDiv").html("Please Enter LoginID");但没有效果。

可能是什么问题？

4

2 回答 2

1

首先这条线行不通

$("#ErrorDiv").slideUP();

它应该是

$("#ErrorDiv").slideUp(); //lower case p

其次，您的警报document.getElementById("ErrorDiv").value将不起作用，因为它是一个 div，因此它没有价值。你可以提醒它是 innerHTMLdocument.getElementById("ErrorDiv").innerHTML或使用 jQuery$('#ErrorDiv').text()

我也没有看到你的第一个if陈述的重点

if(error == 0)

由于每次单击按钮时都将变量 error 设置为 0，因此该语句将始终运行。div如果这是你想做的，你也可以一直滑动切换，就像这样

var error = 0;
$('#ErrorDiv').slideToggle();

我在这里更新了你的小提琴-> http://jsfiddle.net/d9Wwj/3/ 我也改变了你的一些逻辑。ErrorDiv当没有更多错误时，您也没有清除您的错误。

下面是成品

$((function(){
  $("#btnLogin").click(function (){
     var error = "";
     $('#ErrorDiv').slideToggle();

     if($("#txtLoginID").val() == ""){
         error += "Please Enter LoginID";
     }
     if($("#txtPassword").val() == ""){
        if(error){
           error += "<br />Please enter a password";   
        } else {
           error += "Please enter a Password";  
        }        
     }

     if(!error){
        $("#ErrorDiv").html("").slideUp();
     } else {
        $('#ErrorDiv').html(error).slideDown();
     }
  });
});
于 2013-05-21T09:00:26.203 回答
1

尝试这个

<div id="ErrorDiv" style="display:none;">Error</div>
<form>
    <input type="text" id="txtLoginID"/>
    <input type="password" id="txtPassword"/>
    <input type="submit" id="btnLogin"/>
</form>

脚本：

$("#btnLogin").click(function() {
    var error = '';
    if (error == '') {
        $("#ErrorDiv").hide();
    }
    if ($("#txtLoginID").val() == "") {
        error = 'Please Enter LoginID \n';
    }
    if ($("#txtPassword").val() == "") {
        error += 'Please Enter Password'
    }
    if (error != '') {
        alert(error);
        $("#ErrorDiv").text(error).show();
    } else {
        $("#ErrorDiv").slideUP();
    }
    return false;
});

小提琴

于 2013-05-21T09:04:00.700 回答