- Автор: Чен Даютоу
- гитхаб:KRISACHAN
предисловие
рыбья голова была в«Extreme Edition» использует чистый CSS для достижения супер-дерзкой проверки формы без смешивания воды.Статья поделилась наворотамиПроверка формы с помощью чистого CSS. Хотя опираясь только наCSSОн не может удовлетворить наши повседневные потребности в разработке, но с различными роднымиformПри проверке **API ** ситуация снова меняется.
Давайте узнаем ниже.
Связанные API
ValidityState
У каждого собственного компонента формы есть объект, описывающий состояние проверки элемента —ValidityState.
код показывает, как показано ниже:
账号：<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required id="input-text" />
<script>
'use strict';
const inputText = document.querySelector('#input-text');
inputText.addEventListener('input', event => {
console.table(inputText.validity);
});
</script>
Результат выглядит следующим образом:
Конкретные свойства следующие:
| Атрибуты | необязательное значение | иллюстрировать |
|---|---|---|
| valueMissing (только чтение) | true / false |
Когда элемент формы установленrequiredсвойства иvalueКогда он пустой, онtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalid. |
| typeMismatch (только чтение) | true / false |
Когда значение, введенное элементом формы, не соответствует типуtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalid. |
| patternMismatch (только чтение) | true / false |
Когда значение, введенное в элементе формы, соответствуетpatternесли правила для атрибута не совпадаютtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalid. |
| слишком долго (только чтение) | true / false |
Когда значение, введенное в элемент формы, длиннееmaxlengthатрибут, когдаtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalid. |
| слишком короткий (только для чтения) | true / false |
Когда длина значения, введенного в элемент формы, меньшеminlengthатрибут, когдаtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalidтак же как:in-range / :out-of-range. |
| rangeUnderflow (только чтение) | true / false |
Когда значение, введенное в элемент формы, меньшеminатрибут, когдаtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalidтак же как:in-range / :out-of-range. |
| rangeOverflow (только чтение) | true / false |
Когда значение, введенное в элемент формы, превышаетmaxатрибут, когдаtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalidтак же как:in-range / :out-of-range. |
| stepMismatch (только чтение) | true / false |
Когда значение, введенное в элементе формы, соответствуетstepне соответствует значениюtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalidтак же как:in-range / :out-of-range. |
| badInput (только чтение) | true / false |
Когда значение, введенное для элемента формы, является неполным иUAКогда форма в ее текущем состоянии не должна быть отправленаtrue, иначеfalse. |
| customError (только для чтения) | true / false |
Когда сообщение об ошибке элемента формы выдаетсяsetCustomValidity()Когда отображается вызов метода,true, иначеfalse. |
| Действителен (только для чтения) | true / false |
Когда элемент формы проверяется какtrue, иначеfalse. Этот атрибут связан с псевдоклассом:valid / :invalid. |
validationMessage
Возвращает, когда элемент формы правильно проверяется'', в противном случае вернуться к умолчанию или черезsetCustomValidity()Сообщение об ошибке для настроек метода.
Эффект следующий:
код показывает, как показано ниже:
账号：<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required id="input-text" />
<script>
'use strict';
const inputText = document.querySelector('#input-text');
inputText.addEventListener('input', event => {
console.table(inputText.validationMessage); // 验证错误时则返回 “请与所请求的格式保持一致。”
});
</script>
willValidate
Доступное только для чтения свойство, которое возвращается, когда элемент формы требует проверки.true, иначеfalse.
Эффект следующий:
код показывает, как показано ниже:
账号：<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required id="input-text" />
<script>
'use strict';
const inputText = document.querySelector('#input-text');
inputText.addEventListener('input', event => {
console.table(inputText.willValidate); // true
});
</script>
setCustomValidity()
setCustomValidity()Для установки элемента формыvalidationMessageценность . когда установленоsetCustomValidity()Позже,validity.customErrorстанетtrue. Если вам нужно сбросить, просто введите пустую строку.
Давайте посмотрим на рендеры:
код показывает, как показано ниже:
<form class="form" id="form" method="get" action="/api/form">
账号：
<input id="account" data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
<input id="submit" name="button" type="submit" value="提交" />
</form>
<script>
'use strict';
account.setCustomValidity('自定义错误！');
form.addEventListener('submit', event => {
event.preventDefault();
});
</script>
checkValidity()
checkValidity()Используется для проверки правильности значения текущего элемента формы или всей формы, если даtrue, иначеfalse.
Эффект следующий:
код показывает, как показано ниже:
账号：<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required id="input-text" />
<script>
'use strict';
const inputText = document.querySelector('#input-text');
inputText.addEventListener('input', event => {
console.table(inputText.checkValidity());
});
</script>
reportValidity()
reportValidity()Используется для запуска и проверки того, проходит ли проверка значение элемента формы, если даtrue, иначеfalse.
Эффект следующий:
код показывает, как показано ниже:
账号：<input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required id="input-text" />
<script>
'use strict';
const inputText = document.querySelector('#input-text');
console.log(inputText.reportValidity());
</script>
Вышеупомянутая совместимость API выглядит следующим образом:
Изображение из:руб. newser.com/constraint-…
Простой пример отправки формы
Посмотрим на эффект:
код показывает, как показано ниже:
<style>
.form > input {
margin-bottom: 10px;
}
</style>
<form class="form" id="form" method="get" action="/api/form">
账号：
<input id="account" data-message="请输入正确的账号" data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
<br />
密码：
<input id="password" data-message="请输入正确的密码" data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
<br />
<input id="submit" name="button" type="submit" value="提交" />
</form>
<script>
'use strict';
const inputs = [account, password];
inputs.forEach(input => {
input.addEventListener('input', () => {
input.setCustomValidity('');
input.checkValidity();
});
input.addEventListener('invalid', event => {
const { message } = event.target.dataset;
const { validity: { valid } } = input;
input.setCustomValidity('');
if (!valid) {
input.setCustomValidity(message);
};
});
});
</script>
Приведенный выше пример можно найти в голове рыбы.Codepen:код спрей.IO/Антияпонское производство 77/…Посмотреть выше.
Примечание рыбьей головы: Ммммм, функция неплохая, если бы дело не в том, что собственный стиль компонента слишком уродлив, производительность разных браузеров непоследовательна, а стиль нельзя изменить, я думаю, должно быть много людей, разрабатывающих с родным API. . . Я не понимаю, почему W3C не раскрывает свойства модификации стиля. . .
использованная литература
- «Extreme Edition» использует чистый CSS для достижения супер-дерзкой проверки формы без смешивания воды.
- «Действительно ароматное предупреждение» Эти 33 очень полезных селектора CSS, возможно, вы никогда их не видели.
- form-control-infrastructure
- ValidityState
- HTMLFormElement
- Constraint validation API