Question

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

因为风格只是喜欢它（红色文字，在输入文字下）。我的意思是不使用javascript警报。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

感谢。

Answer 1

您可以创建<?php if(!isset($_SESSION['UserName']) && $_SESSION['UserName']== "") { include 'Form.php'; } else { echo "Logged in"; } ?>并根据建议添加p tag，即字符长度应小于errors，如下所示，我甚至在条件下做了一些修正。

＆＃13;

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);

＆＃13;

p{
  color:red;
}

＆＃13;

Answer 2

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

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

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

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

通过启动代码，我指的是用于启动脚本的任何内容。通常情况下它是这样的：

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

}

或者，对于旧浏览器，

window.onload=init;

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

Answer 4

试试这个：

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

如何根据条件在输入文本下发出警报？

4 个答案: