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

我想发出警报。因此，当值为空或null时，警报为必须输入nama pengguna。如果该值小于5，则警报至少为5个字符

因为样式仅与之类似（红色文本，在“输入文本”下）。我的意思是不要使用javascript警报

这是我的代码：

函数checkLength（）{
var textbox=document.getElementById（“用户名”）；
如果（textbox.value.length如果您想相应地更改消息，您将与HTML5验证进行斗争，但这不会是一个太大的问题

您需要做的是在数据更改时检查值

将以下内容放入您的stattup代码中：

document.querySelector('input#username').onchange=function() {
    checkLength();
}

所谓启动代码，我指的是启动脚本所用的任何代码。通常情况下，它类似于：

document.addEventListener('DOMContentLoad',init,false);
function init() {

}

或者，对于较旧的浏览器

window.onload=init;

如果要将警报转换为简单的文本消息，请按照下面的代码进行操作

HTML

<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)" />
<span class="username_error" class="error"></span>
</div>  
    </div>

<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" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" onKeyUp="checkLength()">
    <br>
    <span style="color:#A42022" id="error"></span> </div>
</div>


纳马彭古纳

Javascript

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


函数checkLength（）{
var textbox=document.getElementById（“用户名”）；
如果（textbox.value.length，您可以创建一个
p标记
，并按照建议附加那些
错误
，即字符长度应小于
5
，如下所示，我甚至在条件方面做了一些更正


var textbox=document.getElementById（“用户名”）；
var pr=document.createElement（“p”）；
函数nm（）{
如果（textbox.value.length>=1&&textbox.value.length，请尝试以下操作：

HTML

<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)" />
<span class="username_error" class="error"></span>
</div>  
    </div>

<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" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" onKeyUp="checkLength()">
    <br>
    <span style="color:#A42022" id="error"></span> </div>
</div>


纳马彭古纳



JAVASCRIPT

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

}
</script> 


函数checkLength（）{
var textbox=document.getElementById（“用户名”）；
如果（textbox.value.length==0）{
document.getElementById（'error'）.innerHTML=“必须输入nama pengguna”；
}else if（textbox.value.length<5）{
document.getElementById（'error'）.innerHTML=“至少5个字符”；
}否则{
document.getElementById（'error'）.innerHTML=“”；
}
}
在keydown或keyupsorry上调用checkLength（）函数，我已经编辑了它。您是在询问
警报的替代方案，还是已经有了该选项？@batchasing当值小于5@ujang7654321ujang7654321检查我的最新答案，让我知道你们是否仍然面临这个问题。