Как отобразить ошибку в div, если пароль слишком короткий или слишком длинный, используя JavaScript или PHP

есть пути на стороне сервера и пути на стороне клиента. Первая проверка будет на стороне клиента. Я делаю это так:

<div class="container">
    <span class="main_text">Textbox</span><br>
    <input name="textbox1" type="password" id="textbox1" placeholder="Password" 
           onKeyup='checkLength()'>
    <br>
    // Display error here
    <span id="errorSpan"></span>
</div>
</body>
</html>
<script type="text/javascript">
    function checkLength(){
        var tb = document.getElementById('textbox1');
        var limit = 16;  // set this?
        if(tb.length > limit){
            document.getElementById('errorSpan').innerHtml ='This field is limited to '+ limit +' characters';
            // leave only the first 'limit' chars in the field...
            tb.innerHtml = tb.innerHtml.substr(0,limit);
        }else{
            document.getElementById('errorSpan').innerHtml = '';
        }
    }
</script>

вы можете сделать его несколько более многоразовым, например:

<div class="container">
    <span class="main_text">Textbox</span><br>
    <input name="textbox1" type="password" id="textbox1" placeholder="Password" 
           onKeyup='checkLength(this,16,'errorSpan')'>
    <br>
    // Display error here
    <span id="errorSpan"></span>
</div>
</body>
</html>
<script type="text/javascript">
    function checkLength(field, limit, showWhere){
        var tb = field;
        if(tb.length > limit){
            document.getElementById(showWhere).innerHtml ='This field is limited to '+ limit +' characters';
            // leave only the first 'limit' chars in the field...
            tb.innerHtml = tb.innerHtml.substr(0,limit);
        }else{
            document.getElementById(showWhere).innerHtml = '';
        }
    }
</script>

надеюсь, этого достаточно, чтобы вы начали. Вы также должны сделать проверку на стороне сервера, потому что люди могут легко обойти javascript.

add onchange='checkPasswordLength(this.value)' в тег открытия input.

Затем, после ввода, добавьте:

<span id="errorSpan" style="color:red;"></span>
<script>
    function checkPasswordLength(password){
         if (password.length > 16) {
             document.getElementById("errorSpan").innerHTML = "Limit is 16 characters";
         }
         else {
             document.getElementById("errorSpan").innerHTML = "";
         } 
    }
</script>

var textbox1 = document.getElementById('textbox1');
function checkLength() {
    var length = textbox1.length;
    if (length > 16) {textbox1.insertAdjacentHTML('afterend', 'You are limited to 16 characters');}
}
textbox1.addEventListener('change', checkLength, false);

Хотя вы также можете использовать метод .innerHTML, .insertAdjacentHTML дает вам контроль над тем, где вы хотите вставить строку. Он также обеспечивает значительное повышение производительности. https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/

EDIT: вы также можете прослушивать любое из ключевых событий. т.е. нажатия клавиш, нажатия клавиш, нажатия клавиш. Кроме того, я должен указать, что вы не должны полагаться на JavaScript для таких вещей. JavaScript может быть отключен. Что-то реализовано на стороне сервера.

вы можете использовать strlen() в php. функции strlen() подсчитывают количество символов, которые находятся в строке.

<?php
if(strlen($password) < 6) {
    echo 'ERROR: password is too short';
} 
else {
    echo 'Congratulations! Your password is secured';
}
?>

Проверьте этот код, например - http://codepen.io/shhade/pen/nBmJy