Плагин формы jQuery EasyUI -Validatebox

jQuery EasyUI 插件jQuery EasyUI Плагины

Переопределить настройки по умолчанию через $.fn.validatebox.defaults.

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

Зависимости

  • tooltip

Использование

Создать validatebox из разметки.

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

Создайте validatebox с помощью JavaScript.

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

Проверьте, совпадают ли пароль и повторно введённый пароль.

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

Правила проверки

Правила проверки определяются с помощью атрибутов `required` и `validType`. Ниже приведены реализованные правила:

  • email: соответствует правилу регулярного выражения для email.
  • url: соответствует правилу регулярного выражения URL.
  • length[0,100]: допускает от x до y символов.
  • remote['http://.../action.do','paramName']: отправляет ajax-запрос для проверки значения, возвращая 'true' при успехе.

Чтобы настроить правило проверки, переопределите $.fn.validatebox.defaults.rules, задав функцию проверки и сообщение об ошибке. Например, определите тип проверки minLength:

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

Теперь вы можете использовать этот тип проверки minLength, чтобы определить поле ввода, требующее не менее 5 символов:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

Свойства

Name Type Описание Default
required логическое значение Определяет, должно ли поле быть заполнено. false
validType string,array Определяет тип валидации поля, например email, url и т. д. Возможные значения:
1. Строка типа валидации, применяющая одно правило валидации.
2. Массив типов валидации, применяющий несколько правил валидации. Несколько правил валидации для одного поля доступны начиная с версии 1.3.2.

Пример кода:
<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
    required:true,
    validType:['email','length[0,20]']
">
null
delay число Задержка проверки последнего введённого значения. Это свойство доступно начиная с версии 1.3.2. 200
missingMessage string Текст подсказки, отображаемый, когда текстовое поле пустое. Поле обязательно для заполнения.
invalidMessage string Текст подсказки, отображаемый, когда содержимое текстового поля некорректно. null
tipPosition string Определяет положение сообщения-подсказки, когда содержимое текстового поля некорректно. Возможные значения: 'left', 'right'. Это свойство доступно начиная с версии 1.3.2. right
deltaX число Смещение подсказки по оси X. Это свойство доступно начиная с версии 1.3.3. 0
novalidate логическое значение Если установлено значение true, отключает проверку. Это свойство доступно начиная с версии 1.3.4. false

Методы

Name Parameters Описание
destroy none Удалить и уничтожить компонент.
validate none Выполнить проверку, чтобы определить, является ли содержимое текстового поля допустимым.
isValid none Вызвать метод validate и вернуть результат проверки: true или false.
enableValidation none Включить валидацию. Этот метод доступен начиная с версии 1.3.4.
disableValidation none Отключить валидацию. Этот метод доступен начиная с версии 1.3.4.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения