Question

如果用户名或密码为空，我会尝试显示图片警告消息。

然而如果我的用户名或密码为空，则不会显示图像。我想念的地方？

我的Javascript代码

function LoginButonOnclick() {
var data= {
UserName: $('#UserNameTextBox').val(),
Password: $('#PasswordTextBox').val(),
};
if (data.UserName== null) {
$("#showwarning").html('<img src="~/Image/warning.png">');
}
if (data.Password== null) {
$("#showwarning").html('<img src="~/Image/warning.png" />');
}
}

我的Html代码：

<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
<input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
<input type="button" onclick="LoginButonOnclick()" value="Enter"/>

<div id="showwarning"></div>

Answer 1

 data.UserName=="" //an empty string is not null

Answer 2

你有很多麻烦。这是我更新的代码：

在HTML中，UserName文本框名为UserNameTextBox，但在jQuery中，您将其命名为UsernameTextBox。 JavaScript区分大小写。
你不能将~用于图像的客户端路径，这是一个ASP.Net的东西。
在JavaScript中，您可以拥有 falsey 和 truthy 值。当我检查结果时，我检查空白和未定义。虽然也许最好使用正则表达式来检查空字符串。

代码

function LoginButonOnclick() {
    var data = {
        UserName: $('#UsernameTextBox').val(),
        Password: $('#PasswordTextBox').val(),
    };

    if (!data.UserName) {
        alert('ERROR!');
        $("#showwarning").html('<img src="/Image/warning.png">');
    }
    if (!data.Password) {
        $("#showwarning").html('<img src="/Image/warning.png" />');
    }
}

jsFiddle

使用正则表达式验证字符串中是否存在非空字符：

if (!/\S/.test(UserName)) {
    $("#showwarning").html('<img src="/Image/warning.png">');
}

Answer 3

您还应该使用jQuerys

bind

用于将按钮上的单击指定给某个功能的功能。见http://jsfiddle.net/jX3N2/

Javascript图像警告不起作用

3 个答案:

代码

jsFiddle