Шаг 237.
Библиотека jQuery. Использование модулей расширения. Библиотека расширений jQuery UI. Формы. Виджет Validation (методы)
На этом шаге мы рассмотрим методы этого виджета.
Материал этого шага базируется на http://2develop.ru/jquery/proverka-poley-s-pomoshtyyu-jquery.html и
http://www.linkexchanger.su/2008/46.html#more-46.
Плагин jQuery Validation предоставляет целый набор стандартных методов проверки.
- required() – делает элемент обязательным для заполнения. Возвращает false, если элемент пустой (текстовое поле),
не отмечен (radio/checkbox) или ничего не выбрано (для select).
$("#myform").validate({
// здесь field - идентификатор
// соответствующего поля ввода
rules: { field: "required" }
});
- remote(url) - запрашивает ресурс, расположенный на сервере через $.ajax (XMLHttpRequest) и передает пару ключ/значение,
соответствующую атрибуту name проверяемого элемента в GET-запросе. Ответ сервера оценивается как данные в формате
JSON и должен вернуть true для корректных данных, и false – для некорректных.
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: "check-email.php"
}
}
});
- minlength(length) – элемент ввода будет требовать ввести количество символов не менее, чем указано в length.
Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox.
$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});
- maxlength(length) – элемент ввода будет требовать ввести количество символов не более, чем указано в length.
Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox.
$("#myform").validate({
rules: {
field: {
required: true,
maxlength: 4
}
}
});
- rangelength(range) – элемент ввода будет требовать ввести количество символов, соответствующее диапазону, указанному в range.
$("#myform").validate({
rules: {
field: {
required: true,
rangelength: [2, 6]
}
}
});
- min(value), max(value), range(range) – смысл тот же, только фигурирует уже не количество символов, а числа.
$("#myform").validate({
rules: {
field: {
required: true,
range: [13, 23]
}
}
});
- equalTo(other) – требует, чтобы элемент соответствовал (был эквивалентен) другому элементу, указанному в other. Возвращает
true, если это условие выполняется, и false в противном случае. Работает с текстовыми полями.
$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
- email() – делает элемент ввода требующим корректно введенного e-mail адреса. Возвращает true, если
адрес корректный, и false в противном случае. Работает с текстовыми полями.
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});
- url() – делает элемент ввода требующим корректно введенного URL (типа, начните с http://). Возвращает
true, если URL корректный, и false в противном случае. Работает с текстовыми полями.
$("#myform").validate({
rules: {
field: {
required: true,
url: true
}
}
});
- date() - делает элемент ввода требующим корректно введенной даты. Возвращает true, если дата корректна, и
false в противном случае. Проверяет только формат даты, а не ее правильность, поэтому конструкция 30/30/2013 будет верной датой.
$("#myform").validate({
rules: {
field: {
required: true,
date: true
}
}
});
- dateISO() - делает элемент ввода требующим корректно введенной даты в ISO-формате. Возвращает true, если дата корректна, и
false в противном случае. Дата задается в текстовом поле.
$("#myform").validate({
rules: {
field: {
required: true,
dateISO: true
}
}
});
- number() - делает элемент ввода требующим корректно введенного десятичного числа. Возвращает true, если число
десятичное, и false в противном случае. Число задается в текстовом поле.
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
- digits() - делает элемент ввода требующим ввода цифр. Возвращает true, если введены только цифры,
и false в противном случае. Цифры задаются в текстовом поле.
$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});
- creditcard() - делает элемент ввода требующим ввода номера кредитной карты. Возвращает true, если номер карты
введен корректно, и false в противном случае. Номер задается в текстовом поле. Метод не может проверить правильность ввода
номера кредитной карты, он проверяет только формат ввода номера.
$("#myform").validate({
rules: {
field: {
required: true,
creditcard: true
}
}
});
- accept(mimetype) - делает элемент ввода требующим ввода имени файла определенного MIME-типа. Возвращает true, если
файл указанного типа, и false в противном случае.
Использует функции API HTML5, чтобы определить, являются ли файлы разрешенных MIME-типов.
Если ничего не указано, только используется тип (image / *).
Вы можете указать несколько MIME-типов, разделяя их запятой, например "image/x-eps,application/pdf".
$("#myform").validate({
rules: {
field: {
required: true,
accept: "audio/*"
}
}
});
- extension(extension) - делает элемент ввода требующим ввода имени файла c определенным расширением. Возвращает
true, если файл имеет указанное расширение, и false в противном случае. Если ничего не указано, то допускаются
расширения png, jpeg, gif. Работает с текстовой строкой. В следующем примере проверяется, имеет ли файл расширения
".xls" или ".csv".
$("#myform").validate({
rules: {
field: {
required: true,
extension: "xls|csv"
}
}
});
- phoneUS( ) - делает элемент ввода требующим ввода действительного телефонного номера США. Возвращает
true, если номер указан верно, и false в противном случае. Работает с текстовой строкой.
$("#myform").validate({
rules: {
field: {
required: true,
phoneUS: true
}
}
});
Примечание.
Для трех последних методов необходимо подключение библиотеки с дополнительными методами
additional-methods.js.
На следующем шаге мы рассмотрим виджет Jeditable.
Предыдущий шаг
Содержание
Следующий шаг