javascript - 如何在javascript中的文本框旁边显示错误消息？

Question

我是 Javascript 新手。所以我对以下功能有疑问，如何在文本框旁边显示错误消息？现在它正在显示一条警报消息，但我需要更改警报消息并需要在文本框旁边显示它？

function AllowLock(){
    if (!locker.lock.value.match(/[a-zA-Z]$/) && locker.lock.value !="") {
        locker.lock.value="";
        alert("Please Enter only valid lock");
    }
    if(locker.lock.value.length > 5)
        alert("max length exceeded");
    } 
}

Answer 1

您必须有该消息的任何容器，因此您可以创建元素，然后使用 jquery 将您的消息附加到该元素，类似这样

 <input type="text" id="kuku"></input>

$('#kuku').after('<div></div>').html("your message");

Answer 2

您可以在文本框旁边创建一个 span 元素

<input type="text" /><span id="msg"></span>

并把你的信息。

document.getElementById("msg").innerHTML = "your message";

Answer 3

在这里扩展安娜的答案是一个示例用法。此代码是在单击我的“继续”按钮时调用的。在开始时删除所有现有的错误消息，因此它们不会堆积等。

<input id="userZip" type="number">
<input id="userName" type="text">
$('.errorText').remove();
userZip.style.border = "1px solid black";
userName.style.border = "1px solid black";
if(userName.value.length >= 3){
  if(userZip.value.length == 5){
    //success
    loginPanel.style.display = "none";
    location.href='#appNavigation/'+'mapNav';
  } else {
    userZip.style.border = "1px solid red";
    $('#userZip').after('<div class="errorText">Zipcode required. 5 numbers</div>');
  }
} else {
  userName.style.border = "1px solid red";
  $('#userName').after('<div class="errorText">Username required. 3 or more characters</div>');
}