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

【问题标题】：How to alert under input text with conditions?如何在有条件的输入文本下发出警报？
【发布时间】：2017-09-27 07:18:24
【问题描述】：

想要分割警报。所以当 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>

谢谢。

【问题讨论】：

在 keydown 或 keyup 上调用 checkLength() 函数
对不起，我已经编辑了
您是在寻找alert 的替代品还是已经有了？
@BachchaSingh 格式无效 当值小于 5 时
@ujang7654321ujang7654321 检查我更新的答案，如果您仍然面临问题，请告诉我。

标签： javascript php validation input alert

【解决方案1】：

试试这个：

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" 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>

【讨论】：

【解决方案2】：

您可以创建一个p tag 并按照建议附加那些errors，即字符长度应小于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>

【讨论】：

【解决方案3】：

如果您想将警报转换为简单的短信，请按照下面的代码。

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>

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>

CSS

<style>
.error{
  color:"red";
}
</style>

【讨论】：

【解决方案4】：

如果您想相应地更改您的消息，您将与 HTML5 验证作斗争，但这不是什么大问题。

您需要做的是在数据发生变化时检查该值。

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

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

启动代码是指用于启动脚本的任何代码。通常情况下是这样的：

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

}

或者，对于旧版浏览器，

window.onload=init;

【讨论】：