Браузеры ведут себя по-разному для сообщений об ошибках формы HTML5

Я создал страницу входа. у него есть форма с полями имени пользователя и пароля. Имя пользователя должно быть текстовым файлом с типом электронной почты, а пароль будет текстовым файлом с типом пароля, который должен соответствовать шаблону регулярного выражения.

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

Интернет-обозреватель

введите здесь описание изображения

Google Chrome

введите здесь описание изображения

Mozilla Firefox

введите здесь описание изображения

это полностью зависит от поведения браузера, как они обрабатывают HTML5? возможно ли иметь общий дизайн для сообщений об ошибках без написания большого количества кода.

заранее спасибо


javascript html angularjs html5-validation
person Shareer    schedule 13.12.2016    source источник
comment
По опыту могу сказать, что у каждого браузера свое сообщение об ошибке, однако я не знаю, можно ли переопределить их сообщения.   -  person Tapaka    schedule 13.12.2016
comment
Это зависит от браузера. Если вы хотите отображать в универсальном дизайне, вам нужно использовать угловой способ проверки формы ttps://docs.angularjs.org/guide/forms (если вы используете angularjs) или использовать сторонние плагины проверки формы.   -  person Paulson Peter    schedule 13.12.2016
comment
Единственный способ гарантировать общий дизайн — реализовать проверку самостоятельно. Но я должен спросить, действительно ли это проблема? Большинство людей используют и придерживаются одного браузера, они привыкнут к внешнему виду нативных сообщений об ошибках.   -  person Ankh    schedule 13.12.2016
comment
Вы используете CSS-фреймворк, такой как bootstrap, и получаете одинаковый внешний вид во всех браузерах.   -  person w.Bala    schedule 13.12.2016
comment
Метод JavaScript setCustomValidity() может вам помочь!   -  person kiner_shah    schedule 13.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вы не можете изменить поведение по умолчанию, но для этого вы можете использовать угловую проверку.

Что-то вроде этого:

<form name="signUpForm">
            <div>
                <input name="email" type="email" required autocomplete="off" ng-model="formData.Email" />
                <div class="error-message" ng-show="signUpForm.email.$error.required">UserName is required</div>
                <div class="error-message" ng-show="signUpForm.email.$error.email">Not Valid Email</div>
            </div>
        </form>

затем вы можете настроить класс сообщений об ошибках по своему усмотрению. чтобы показывать сообщения только при отправке формы, необходимо внести некоторые изменения, но вы можете понять идею.

см. это: Angular Forms

и это: Проверка Angular Forms

для получения дополнительной информации.

person Ori Price    schedule 13.12.2016