Подтверждение пароля с помощью CSS

Question

Для некоторых студентов я сделал несколько простых проверок пароля в html и javascript Теперь мне интересно, могу ли я сделать проверку пароля, используя только html и css (то есть без javascript) ?

Я понимаю, что css не используется для проверки формы, только для изменения некоторых реквизитов, таких как цвета, в качестве реакции на процесс проверки. Однако html шаблон ввода и атрибуты типа. Я не знаю, где поставить последние два предложения - здесь, в качестве комментария или в качестве ответа, так что вот оно. Приветствия

Answer 1

Вы можете использовать атрибут HTML5 pattern ( см. Здесь для получения дополнительной информации ), который позволяет вам определять разрешенные шаблоны как регулярные выражения. Помните, что это поддерживается не всеми браузерами.

Элемент input для электронной почты может выглядеть следующим образом:

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Затем вы можете использовать CSS, чтобы дать пользователю обратная связь, если значение поля недопустимо:

input:invalid {
    border-color: red;
}

input:valid {
    border-color: green;
}