javascript - Javascript如何显示图像警告验证而不是警报消息

Question

，大家好，

如果用户名文本框为空或密码文本框为空，我可以使用以下代码显示警报消息。

我想显示图像警告而不是显示警报消息

我怎么能在下面的代码中做到这一点？

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

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


        if (data.Username==null) {
        alert(UserName Can Not Be Empty!"); // I want to show image warning
        }
        if (data.Password==null) {
        alert("Password Can Not Be Empty!"); // I want to show image warning
        }



 if (data.Username&& data.Password) {
 $.ajax({
 url: "/Home/Menu",
 type: "POST",
 dataType: "json",
 contentType: 'application/json',

 data: JSON.stringify(data),
 success: function (mydata) {
 if (mydata.error == true) {
 // İnvalid
 }
 else {
 // Success
 }
 },
 error: function () {
 $("#message").html("Error ");
 }
 });
 return false;
 }
 }

Answer 1

您可以将 img 附加到 html 元素。

if (data.Username==null) {
   $("#alert-img-place").html('<img src="img1.png">'); // Change to path to your img
}
if (data.Password==null) {
   $("#alert-img-place").html('<img src="img2.png">'); // Change to path to your img
}