Спецификация HTML5 определяет некоторые очень интересные компоненты проверки, включая шаблон (для проверки против Regexp) и требуемый (для маркировки поля как требуется). Как лучше всего я могу сказать, однако, никакой браузер все же на самом деле не делает проверки на основе этих атрибутов.
Я нашел сравнение поддержки HTML5 через механизмы, но нет никакой информации о проверке там. В браузерах я попробовал (Firefox 3.5.8 и Safari 4.0.4), никакой объект не имеет a checkValidity()
метод, таким образом, я не могу выполнить проверки даже при том, что я могу определить их.
Есть ли поддержка этой функции там, таким образом, я могу экспериментировать?
Я тестировал следующее в Google Chrome:
<!DOCTYPE html>
<html>
<body>
<style>
.valid { color: #0d0; }
.invalid { color: #d00; }
</style>
<div id="output"></div>
<script>
function check(input) {
var out = document.getElementById('output');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class='valid'>" + input.id +
" is valid</span>";
} else {
out.innerHTML = "<span class='invalid'>" + input.id +
" is not valid</span>";
}
}
console.log(input.checkValidity());
};
</script>
<form id="testform" onsubmit="return false;">
<label>Required:
<input oninput="check(this)" id="required_input"
required />
</label><br>
<label>Pattern ([0-9][A-Z]{3}):
<input oninput="check(this)" id="pattern_input"
pattern="[0-9][A-Z]{3}"/>
</label><br>
<label>Min (4):
<input oninput="check(this)" id="min_input"
type=number min=4 />
</label><br>
</form>
</body>
</html>
Stangely, свойство
, похоже, работает правильно, но вызывает ] <элемент>.checkValidity ()
всегда возвращает true, поэтому похоже, что это еще не реализовано.
Opera 10 имеет некоторую проверку формы HTML5 http://dev.opera.com/articles/view/improve-your-forms-using-html5/ . Но я не думаю, что у него есть checkValidation ().
Конечно. Opera и Chromium. Но вы можете проверить себя:
function supportsValidity(){
var i = document.createElement('input');
return typeof i.validity === 'object'
}
Вот ссылка на песочницу, где вы можете увидеть Opera и Chrome в действии: http://jsfiddle.net/vaZDn/light/
Согласно Dive into HTML5:
Когда пользователь Opera пытается отправить форму с полем, Opera автоматически предлагает RFC-совместимую проверку электронной почты, даже если сценарии отключены. Opera также предлагает проверку веб-адресов, введенных в поля, и чисел в полях. При проверке чисел даже учитываются атрибуты min и max, поэтому Opera не позволит вам отправить форму, если вы введете слишком большое число.
(Цитируемый абзац - последний в статье.)
Насколько мне известно - а учитывая, что я не тестировал Opera 10, я верю им на слово - ни один другой браузер пока не проверяет формы автоматически.