javascript - 如何在有条件的输入文本下发出警报？

Question

Please look the picture here

想要分割警报。因此，当 value 为空或 null 时，警报是nama pengguna 必须输入。如果值小于 5，则警报为最少 5 个字符。

因为样式只是喜欢它(红色文本，在输入文本下)。我的意思是不使用 javascript 警报。

这是我的代码:

function checkLength() {
	var textbox = document.getElementById("username");
	if(textbox.value.length <= 5) {
		alert("min 5 characters");
	}
	else if(textbox.value.length == 0){
		alert("nama pengguna must inputed")
	}
}

<div class="form-group required2">
	<label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
	<div class="input-icon">
 		<i class="fa fa-user"></i>
		<input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" onchange="checkLength()" required title="nama pengguna must inputed (min 5 characters)">
	</div>
</div>

谢谢。

Answer 1

您可以创建一个p标签并按照建议附加这些错误，即字符长度应小于5，如下所示，我有甚至对条件做了一些修正。

var textbox = document.getElementById("username");
var pr = document.createElement("p");
function nm(){
	if(textbox.value.length >= 1 && textbox.value.length <= 5){
  pr.textContent = "min 5 characters";
  document.body.appendChild(pr);
  }
  else if(textbox.value.length === 0){
  pr.textContent = "nama pengguna must inputed";
  document.body.appendChild(pr);  
  }
}
textbox.addEventListener("blur",nm);

p{
  color:red;
}

<div class="form-group required2">
  <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
  <div class="input-icon">
    <i class="fa fa-user"></i>

    <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" />
  </div>
</div>