Проверка данных переднего плана начинается с моделирования

Какие бизнес-проблемы, по вашему мнению, больше всего раздражают в процессе разработки интерфейса?

Давно работаю на фронтенде. Я не знаю, есть ли у вас те же чувства, что и у меня. В некоторых веб-приложениях форма доставляет больше хлопот, чем другие функциональные модули. Это большая физическая активность, и часто требуется время для проверки данных.

Чтобы сделать эту часть кода более организованной, мы предварительно определяем модель данных через схему, вбрасываем данные и возвращаем результат проверки.

Далее я представляю этот инструмент. schema-typed — это инструмент моделирования и проверки данных. Его можно использовать для разработки структуры данных формы. Конечно, это не ограничивается использованием в формах. Если вы используете React в своем продукте, компоненты формы, которые работают с React Suite, не менее эффективны.

Установка

npm install schema-typed --save

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

import { SchemaModel, StringType, DateType, NumberType } from 'schema-typed';
const model = SchemaModel({
  username: StringType().isRequired('Username required'),
  email: StringType().isEmail('Email required'),
  age: NumberType('Age should be a number').range(
    18,
    30,
    'Age should be between 18 and 30 years old'
  )
});
const checkResult = model.check({
  username: 'foobar',
  email: '[email protected]',
  age: 40
});
console.log(checkResult);

checkResult возвращаемая структура:

{
    username: { hasError: false },
    email: { hasError: false },
    age: { hasError: true, errorMessage: 'Age should be between 18 and 30 years old' }
}

Множественная проверка

StringType()
  .minLength(6, "Can't be less than 6 characters")
  .maxLength(30, 'Cannot be greater than 30 characters')
  .isRequired('This field required');

Пользовательская проверка

Настройте правило с помощью функции addRule.

Если вы проверяете строковый тип данных, вы можете установить регулярное выражение для пользовательской проверки с помощью метода pattern.

const model = SchemaModel({
  field1: StringType().addRule((value, data) => {
    return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
  }, 'Please enter legal characters'),
  field2: StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, 'Please enter legal characters')
});
model.check({ field1: '', field2: '' });
/**
{
  field1: {
    hasError: true,
    errorMessage: 'Please enter legal characters'
  },
  field2: {
    hasError: true,
    errorMessage: 'Please enter legal characters'
  }
};
**/

Пользовательская проверка — перекрестная проверка нескольких полей

Например: убедитесь, что два пароля одинаковы.

const model = SchemaModel({
  password1: StringType().isRequired('This field required'),
  password2: StringType().addRule((value, data) => {
    if (value !== data.password1) {
      return false;
    }
    return true;
  }, 'The passwords are inconsistent twice')
});
model.check({ password1: '123456', password2: 'root' });
/**
{
  password1: { hasError: false },
  password2: {
    hasError: true,
    errorMessage: 'The passwords are inconsistent twice'
  }
};
**/

Проверка вложенных объектов

Проверяйте вложенные объекты, которые можно определить с помощью метода ObjectType().shape. Например:

const model = SchemaModel({
  id: NumberType().isRequired('This field required'),
  name: StringType().isRequired('This field required'),
  info: ObjectType().shape({
    email: StringType().isEmail('Should be an email'),
    age: numberType().min(18, 'Age should be greater than 18 years old')
  });
});

Более рекомендуется сгладить объект.

import { flaser } from 'object-flaser';
const model = SchemaModel({
  id: NumberType().isRequired('This field required'),
  name: StringType().isRequired('This field required'),
  'info.email': StringType().isEmail('Should be an email'),
  'info.age': numberType().min(18, 'Age should be greater than 18 years old')
});
const user = flaser({
  id: 1,
  name: 'schema-type',
  info: {
    email: '[email protected]',
    age: 17
  }
});
model.check(data);

API

Тип строки

• требуется()

StringType().isRequired('This field required');

• isEmail (сообщение об ошибке: строка)

StringType().isEmail('Please input the correct email address');

• isURL (сообщение об ошибке: строка)

StringType().isURL('Please enter the correct URL address');

• isOneOf (элементы: массив, errorMessage: строка)

StringType().isOneOf(['Javascript', 'CSS'], 'Can only type `Javascript` and `CSS`');

• содержит письмо (сообщение об ошибке: строка)

StringType().containsLetter('Must contain English characters');

• содержитUppercaseLetter (сообщение об ошибке: строка)

StringType().containsUppercaseLetter('Must contain uppercase English characters');

• содержитLowercaseLetter(errorMessage: строка)

StringType().containsLowercaseLetter('Must contain lowercase English characters');

• содержитLetterOnly(errorMessage: строка)

StringType().containsLetterOnly('English characters that can only be included');

• содержит число (сообщение об ошибке: строка)

StringType().containsNumber('Must contain numbers');

• шаблон (regExp: RegExp, errorMessage: строка)

StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, 'Please enter legal characters');

• rangeLength (minLength: число, maxLength: число, errorMessage: строка)

StringType().rangeLength(6, 30, 'The number of characters can only be between 6 and 30');

• minLength (minLength: число, errorMessage: строка)

StringType().minLength(6, 'Minimum 6 characters required');

• maxLength (maxLength: число, errorMessage: строка)

StringType().minLength(30, 'The maximum is only 30 characters.');

• addRule (onValid: функция, errorMessage: строка)

StringType().addRule((value, data) => {
  return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
}, 'Please enter a legal character.');

Тип номера

• требуется()

NumberType().isRequired('This field required');

• isInteger (сообщение об ошибке: строка)

NumberType().isInteger('It can only be an integer');

• isOneOf (элементы: массив, errorMessage: строка)

NumberType().isOneOf([5, 10, 15], 'Can only be `5`, `10`, `15`');

• шаблон (regExp: RegExp, errorMessage: строка)

NumberType().pattern(/^[1-9][0-9]{3}$/, 'Please enter a legal character.');

• диапазон (minLength: число, maxLength: число, errorMessage: строка)

NumberType().range(18, 40, 'Please enter a number between 18 - 40');

• мин (мин: число, сообщение об ошибке: строка)

NumberType().min(18, 'Minimum 18');

• макс (макс: число, сообщение об ошибке: строка)

NumberType().max(40, 'Maximum 40');

• addRule (onValid: функция, errorMessage: строка)

NumberType().addRule((value, data) => {
  return value % 5 === 0;
}, 'Please enter a valid number');

Тип массива

• требуется()

ArrayType().isRequired('This field required');

• rangeLength (minLength: число, maxLength: число, errorMessage: строка)

ArrayType().rangeLength(1, 3, 'Choose at least one, but no more than three');

• minLength (minLength: число, errorMessage: строка)

ArrayType().minLength(1, 'Choose at least one');

• maxLength (maxLength: число, errorMessage: строка)

ArrayType().maxLength(3, "Can't exceed three");

• неповторимый (сообщение об ошибке: строка)

ArrayType().unrepeatable('Duplicate options cannot appear');

• of(тип: Объект, errorMessage: строка)

ArrayType().of(StringType().isEmail(), 'wrong format');

• addRule (onValid: функция, errorMessage: строка)

ArrayType().addRule((value, data) => {
  return value.length % 2 === 0;
}, 'Good things are in pairs');

Тип даты

• требуется()

DateType().isRequired('This field required');

• диапазон (мин.: дата, макс.: дата, errorMessage: строка)

DateType().range(
  new Date('08/01/2017'),
  new Date('08/30/2017'),
  'Date should be between 08/01/2017 - 08/30/2017'
);

• мин (мин: дата, сообщение об ошибке: строка)

DateType().min(new Date('08/01/2017'), 'Minimum date 08/01/2017');

• макс (макс: дата, сообщение об ошибке: строка)

DateType().max(new Date('08/30/2017'), 'Maximum date 08/30/2017');

• addRule (onValid: функция, errorMessage: строка)

DateType().addRule((value, data) => {
  return value.getDay() === 2;
}, 'Can only choose Tuesday');

Тип объекта

• требуется()

ObjectType().isRequired('This field required');

• форма (тип: объект)

ObjectType().shape({
  email: StringType().isEmail('Should be an email'),
  age: NumberType().min(18, 'Age should be greater than 18 years old')
});

• addRule (onValid: функция, errorMessage: строка)

ObjectType().addRule((value, data) => {
  if (value.id || value.email) {
    return true;
  }
  return false;
}, 'Id and email must have one that cannot be empty');

BooleanType

• требуется()

BooleanType().isRequired('This field required');

• addRule (onValid: функция, errorMessage: строка)

ObjectType().addRule((value, data) => {
  if (typeof value === 'undefined' && A === 10) {
    return false;
  }
  return true;
}, 'This value is required when A is equal to 10');