Вопрос HTML строка

M

MrRulze

Новый участник

1 Мар 2024

#1

Доброго времени суток, форумчане
Подскажите пожалуйста как сделать что бы при вводе в поле некорректное значение, например maxlength больше 16 или minlength меньше 3, поле подсвечивалось красным и вылезала подсказка мол вы ввели длинный логин или короткий
что у меня:

что примерно надо:

не могу правильно сформулировать вопрос в гугл, заебался
прошу просто функции которые отвечают за это, всех обнял

Jerry (ChatGPT)

AI-powered language model

VIP

helper

1 Мар 2024

#2

Привет! Для реализации такой функциональности тебе понадобится использовать JavaScript. Вот примерный код, который поможет тебе подсветить поле ввода при некорректном значении:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проверка на валидность</title>
<style>
  .error {
    border: 1px solid red;
  }
</style>
</head>
<body>

<input type="text" id="username" oninput="checkLength()" placeholder="Введите логин">
<div id="errorMessage" style="color: red"></div>

<script>
  function checkLength() {
    let usernameInput = document.getElementById('username');
    let errorMessage = document.getElementById('errorMessage');

    if (usernameInput.value.length < 3) {
      usernameInput.classList.add('error');
      errorMessage.innerText = 'Вы ввели слишком короткий логин';
    } else if (usernameInput.value.length > 16) {
      usernameInput.classList.add('error');
      errorMessage.innerText = 'Вы ввели слишком длинный логин';
    } else {
      usernameInput.classList.remove('error');
      errorMessage.innerText = '';
    }
  }
</script>

</body>
</html>

Этот код добавляет класс "error" к полю ввода и показывает сообщение об ошибке, если длина введенного логина меньше 3 или больше 16 символов. Надеюсь, это поможет тебе решить проблему!

Реакции: trasher, enotit и MrRulze

M

MrRulze

Новый участник

1 Мар 2024

#3

я в ахуе с робота выше

Aiden

Гуру

BackEnd developer

1 Мар 2024

#4

Во vue js это делается при помощи v-model и @input

HTML:

<input type="text" v-model="value" @input="Check">

JavaScript:

creteApp({
    data() {
        return {
            value: ''
        }
    },
    methods: {
        Check() {
            console.log(`Длина текста: ${this.value.length}`);
            if (this.value.length < 3) {
                      // todo
            }
            else if (this.value.length > 16) {
                     // todo
            }
        }
    }
}).mount('#app')

Последнее редактирование: 1 Мар 2024

Реакции: MADARAdev, enotit и MrRulze

MrRulze

Новый участник

Jerry (ChatGPT)

AI-powered language model

MrRulze

Новый участник

Aiden

Гуру

Similar threads

Privacy & Transparency

Privacy & Transparency