Validate-framework

Лёгкий и независимый компонент проверки JavaScript.

Demo: http://minjieliu.github.io/validate-framework/example

Особенности

1. Лёгкий, независимый.
2. Проверка форм с одинаковыми именами.
3. Динамическая проверка.
4. Совместимость с Chrome, Firefox, IE9+.

Быстрый старт

Установите через npm:

npm install validate-framework --save

Базовый пример использования:

<form name="basicForm">
  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control" id="email" name="email" type="email" placeholder="Введите email" />
  </div>
  <div class="form-group">
    <label for="phone">Телефон:</label>
    <input class="form-control" id="phone" name="phone" type="text" placeholder="Введите номер телефона" />
  </div>
  <input class="btn btn-primary" id="submit" type="submit" value="Отправить" />
</form>

import validateFramework from 'validate-framework';

const validator = new validateFramework({
  formName: 'basicForm',
  fields: {
    email: {
      rules: 'required | isEmail | maxLength(32)',
      messages: "Нельзя оставлять пустым | Введите корректный email | Не более {{param}} символов"
    },
    phone: {
      rules: 'isPhone',
      messages: "Некорректный номер телефона: {{value}}"
    }
  },
  callback: function (result, error) {
    // Блокировка отправки формы
    validator.preventSubmit();
    // Выполняем дополнительные действия...
  }
});

// Проверка
validator.validate();

Документация

new validateFramework(options)

Параметры

options (обязательно)

• formName (обязательно): атрибут name или id в <form>.
• fields (необязательно): набор правил и сообщений для проверки полей, можно добавлять и удалять методы с помощью .addMethods(methods) и .removeMethods(...names).
• errorPlacement (необязательно): расположение ошибок.
• callback (необязательно): функция, которая вызывается после отправки формы или вызова .validate().
• classNames (необязательно): классы для обозначения корректных и некорректных проверок.

Пример параметров

fields :

fields: {
  email: {
    rules: 'required | isEmail | maxLength(32)',
    messages: "нельзя оставлять пустым | введите корректный email | не более {{param}} символов"
  },
  phone: {
    rules: 'isPhone',
    сообщения: "некорректный номер телефона: {{value}"
  }
}

Примечание: email и phone — это атрибуты name. rules: одно или несколько правил, разделённых |. messages: соответствующие сообщения об ошибках, разделенные |, где {{value}} — значение из поля, а {{param}} — параметр для maxLength(32).

errorPlacement :

errorPlacement: function (errorEl, fieldEl) {
  // Если элемент не label или radio
  if (fieldEl.parentNode !== undefined) {
    fieldEl.parentNode.appendChild(errorEl);
  }
},

Примечание: errorEl — узел ошибки, fieldEl — проверяемый элемент формы. После неудачной проверки к форме добавляется класс valid-error, а к сообщению об ошибке — класс valid-error-message.

callback :

callback: function (result, error) {
  // Пользовательская логика
  if (errors) {
      // Выполняем действия...
  }
}

Примечание: result — результат проверки, error — массив ошибок при неудачной проверке.

Методы

• Все методы, кроме возвращающих булево значение, поддерживают цепочку вызовов.

.validate() ручная проверка

Возвращает логическое значение. Примечание: по умолчанию используется кнопка отправки для перехвата проверки, но можно вызвать .validate() вручную для проверки всех определённых элементов.

.validateByName(name) проверка одного поля по имени

Возвращает логическое значение.

.preventSubmit() блокировка отправки формы

.addMethods(methods) добавление пользовательских методов проверки

Например:

// Метод для проверки того, что выбрано как минимум две опции checkbox
validator.addMethods({
  selectLimit: function (field, param) {
    // Проверяем, выбрано ли как минимум две checkbox опции
    var checkedNum = 0;
    for (var i = 0, elLength = field.el.length; i < elLength; i++) {
      if (field.el[i].checked) {
        checkedNum += 1;
      }
    }
    return checkedNum >= param;
  },
});

.addFields(fields) динамическое добавление методов fields

С помощью .addFields(fields) можно динамически добавить один или несколько методов проверки формы.

validator.addFields({
  userName: {
    rules: 'required | isRealName',
    messages: "нельзя оставлять пустым | укажите реальное имя"
  }
});

.removeFields(...names) удаление методов fields

// Удаление одного метода
validator.removeFields('userName');
// Удаление нескольких методов
validator.removeFields('userName', 'email');

Встроенные методы проверки

Пример:

v.isEmail('example@qq.com');
v.isPhone('170111222231');

• required(param) проверка на обязательность заполнения
• isAbc(param) проверка на соответствие буквенно-цифровому и нижнему подчеркиванию
• isDate(param) проверка даты
• isDecimal(param) проверка десятичного числа
• isEmail(param) проверка email
• isInteger(param) проверка целого числа
• isIp(param) проверка IP-адреса
• isNumeric(param) проверка натурального числа
• isPhone(param) проверка номера телефона
• isTel(param) проверка телефонного номера
• isUrl(param) проверка URL
• maxLength(param, length) максимальная длина
• minLength(param, length) минимальная длина
• greaterThan(param1, param2) больше определенного числа ## ЛИЦЕНЗИЯ

MIT