HTML5 имеет большую оптимизацию форм, будь то семантика, небольшие компоненты или проверку формата данных. Я думаю, что вы обязательно будете использовать совместимость с браузером в качестве оправдания для использования этих новых функций, но это никогда не должно быть причиной, по которой вы стагнируете. выполненный. Когда вы действительно пытаетесь использовать новые функции этих форм, я обещаю вам влюбиться в это. Если единственный дефект состоит в том, что в браузере по умолчанию стиль подсказок по умолчанию, вы не можете его изменить, хорошо, если вы считаете, что эстетический уровень дизайнера производителя браузера (я считаю, что их уровень дизайна выше, чем у большинства Обычные люди, чем большинство обычных людей, хорошо, если вы не рассматриваете совместимость с стилем), просто поторопитесь и в школу!
Нативная проверка Тип вводаHTML5 обеспечивает много нативной поддержки для проверки формата данных, например ::
<input type = 'email'/>
Нажав кнопку отправки, если введенный вами формат не соответствует электронной почте, это приведет к тому, что он не сможет отправить, и браузер подскажет вам сообщение об ошибке.
Например, под Chrome:
Уведомление:1. Только когда вы отправите его, вы запустите проверку браузера
2. Различная информация о приглашении браузера отличается
3. Когда несколько вводов не соответствуют требованиям, будет вызвана только одна ошибка.
Не думайте, что когда тип ввода равен TEL, если вы введете формат номера телефона, вы будете заблокированы браузером и предпринимают сообщение об ошибке при отправке. Цифровая клавиатура, и она не играет роли в проверке данных.
шаблонВы можете использовать атрибут шаблона для установки пользовательской проверки формата для браузера без предоставления собственного формата данных проверки. Значение атрибута шаблона - это регулярное выражение (строка):
<input type = 'tel' pattern = '[0-9] {11}' if (this.value.length> 3) {// Условие суждения полностью настраивается. Input.setCustomVality ('')}});Каждый вход клавиатуры, код будет определять, является ли формат правильным, а затем вызовет SetCustomVality, чтобы установить значение ValueMessage. Не думайте, что каждый браузер подскажет ваш результат, является ли результат правильным.
Если вы не думали об этом, вы обязательно спросите, с тех пор, почему вам нужно привязывать события клавиатуры для ввода, и вам нужно судить за каждый ввод? Отправьте инцидент напрямую для формы.
С входным форматом суждения и стилемКак пользователь, конечно, после того, как я узнал, что я внес не в неправильный формат, текстовое поле становится красным (или есть и другие советы). И каждый раз, когда я ввожу символ, если он правильно, текстовое поле вернется к нормальному. Мы можем использовать CSS Pseudo Class для реализации этой функции:
Ввод: требуется {фоновое цвета: #ffe14d;} /* Этот псевдо-класс оценивается через свойство ValueMessage* / input: Invalid {Border: 2px Solid Red;}.Требуемый псевдо -категория выше обеспечивает желтый цвет фона для необходимого, но пустого входа, в то время как недопустимый класс псевдо ниже добавит красную сторону 2px ко всему непосредственному входу. Теперь мы можем добавить класс ввода в нашу входную окно.
Условия суждения этих псевдо -категорий определяют, можете ли вы представить форму формы. Стиль стиля.
Лучший пользовательский опытЕще один недостаток заключается в том, что когда вход установлен на требуемый при инициализации, поскольку он пуст, неверная псевдо -категория будет работать над ним.
Мы можем добавить устройство отбора родителей. INVALID перед этими псевдо -категориями. Вы можете установить событие отправки.
Form.addeventListener ('Invalid', function () {this.classname = 'Invalid'}, true), потому что Invaild является инцидентом, а не событием Form, поэтому мы устанавливаем третий параметр для использования True для использования захвата событий. Таким образом, это было сделано.
Окончательный экземплярНу, пришло время подвести итог знаний, которые мы узнали, и создать лучшую практику:
<! {border: 2px solid red;} </style> </head> <body> <form id = form> <label> email: <input type = email reme emoft id = email> </label> <label> idcard: < Ввод обязательный идентификатор = IDCARD> </label> <input type = отправить идентификатор = отправить> </form> <script> var email = document.getElementByid ('email'); ); } Else {this.setCustomVality ('')}});Снимок экрана после запуска выглядит следующим образом:
Приведенное выше содержимое этой статьи.