Проверьте использование асинхронной проверки библиотеки с открытым исходным кодом.

Vue.js

написать впереди

Недавно я читал буклет Nuggets.Эссе о компонентах Vue.jsЯ также практиковался вместе с ним, что полезно при написании компонента с функцией проверкиasync-validator, Когда я учился пользоваться этой библиотекой, я чувствовал, что его инструкции немного непонятны, а хорошей документации на китайском языке в Интернете не было, поэтому я сделал руководство по использованию в соответствии с собственным пониманием.

Базовое использование — синхронное использование

import Schema from 'async-validator';

const descriptor = {
  // name字段的校验规则
  name: {
    type: "string",
    required: true,
    validator(rule, value) {
      return value === "muji"
    },
    message: "输入错误"
  }
};

const validator = new Schema(descriptor);

validator.validate({ name: "muji" }, (errors, fields) => {
  if (errors) {
    // 校验不通过 do something
    return;
  }
  // 校验通过 do something
});

API

validator

Функция проверки синхронизации указанного поля

validator(rule, value, callback) {
  // 设定校验规则，返回true则通过，反之不通过
	return value === "muji"
  // 当校验失败时，也可以返回一个Error对象，此时失败的提示信息为Error参数
  return new Error(`${value} is not equal to 'test'.`);
  // 此时校验错误提示信息为 muji is not equal to 'test'
}

//rule参数为一个对象，包含校验字段的信息以及校验规则
{
  field: "name", // 字段名称
  fullField: "name",
  message: "输入错误", // 校验失败时的提示信息
  required: true, // 是否必选
  type: "string", // 是否为string类型
  validator: ƒ validator(rule, value, callback)
}

// value  字段的值
"muji"

// callback 回调函数

Validate

function(source, [options], callback): Promise
  • source: Объект для проверки (обязательно).
  • options: объект, описывающий параметры обработки для проверки (необязательно).
  • callback: функция обратного вызова, которая будет вызвана после завершения проверки (обязательно)

Этот метод вернет объект Promise следующим образом:

  • then()Проверка прошла
  • catch({ errors, fields }), проверка не проходит, ошибки — это массив всех ошибок, поле — это объект, ключ — это поле, а значение — это соответствующий массив ошибок.
// callback参数解析 共两个参数
(errors, fields) => {}
// errors 校验失败时返回一个所有 error 组成的数组,[{message: "输入错误", field: "name"}]，校验成功则errors值为null
// fields 校验失败时返回一个对象,{name:[{message: "输入错误", field: "name"}]},校验成功则fileds值为null

Базовое использование — асинхронное использование

import Schema from 'async-validator';

const descriptor = {
  age: {
    type: "number",
    asyncValidator(rule, value) {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          // reject 不通过校验，reject返回的信息为校验未通过的提示
          reject("too young")
        } else {
          // resolve 通过校验
          resolve()
        }
      })
    }
  }
}

const validator = new Schema(descriptor)

validator
  .validate({ age: 16 })
  .then(() => {
  // 验证通过 do something
})
  .catch(({ errors, fields }) => {
  // 验证未通过 do something
})

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

asyncValidator

Укажите поле для настройки функции асинхронной проверки

// 参数同validator
asyncValidator(rule, value) {
  return new Promise((resolve, reject) => {
    if (value < 18) {
      // reject 不通过校验，reject返回的信息为校验未通过的提示
      reject("too young")
    } else {
      // resolve 通过校验
      resolve()
    }
  })
}
// ajax异步调用
asyncValidator(rule, value, callback) {
  ajax({
    url: 'xx',
    value: value,
  }).then(function(data) {
    callback();
  }, function(error) {
    callback(new Error(error));
  });
}

Интерпретация остальной части API

Messages

Сообщение об ошибке при сбое проверки

  • Он может направить строку
{ 
  name: { 
    type: 'string', 
    required: true,
    message: '请填写名称'
  }
}
  • Может быть в формате jsx
{ 
  name: { 
    type: 'string', 
    required: true,
    message: '<b>请填写名称</b>'
  }
}
  • может быть функцией
{ 
  name: { 
    type: 'string', 
    required: true,
    message(){
    	// do something
    }
  }
}

Transform

Обработайте значение перед проверкой и верните обработанное значение для проверки

{
  name: {
    type: 'string',
    required: true,
    pattern: /^[a-z]+$/,
    transform(value) {
      // do something
      return value.trim()
    }
  }
}

Options

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

  • suppressWarning: логическое значение, указывающее, следует ли подавлять внутренние предупреждения о недопустимых значениях.

  • first: логическое значение, когда создается первое правило проверкиerrorЗвонок по времениcallback, не продолжайте обработку правил проверки. Если проверка включает несколько асинхронных вызовов (например, запросов к базе данных) и только первыйerrorОстановить, когда это произойдет, используйте эту опцию.

  • firstFields: Boolean|String[], когда генерируется первое правило проверки указанного поляerrorкогда звонятcallback, и больше не продолжать обрабатывать правила проверки того же поля.trueозначает, что все поля активны.

validator.validate(
        { name: "muj" },
  				// 在此处配置options
        {
          suppressWarning: true
        },
        (errors, fields) => {
          if (errors) {
            // 校验不通过 do something
            return
          }
          // 校验通过 do something
        }
      )

Rules

Функция, выполняющая проверку

function(rule, value, callback, source, options)
  • rule: в источникеdescriptor, правило проверки, соответствующее имени поля, которое необходимо проверить. всегда назначайте емуfieldСвойство, содержащее имя поля для проверки.
  • value: значение, которое нужно проверить в свойстве исходного объекта.
  • callback: вызывается после завершения проверкиcallback. он ожидает пройтиErrorМассив экземпляров для указания ошибок проверки. Если проверка синхронна, вы можете вернуться напрямуюfalse,ErrorилиError Array.
  • source: перейти кvalidateИсходный объект для метода.
  • options: Дополнительные опции.

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

{
  // 可以把它看出校验规则的另外一种写法，最开始的是对象形式
name(rule, value, callback, source, options) {
  const errors = []
  if (value != "muji") {
    errors.push("错误")
  }
  return errors
}
}

Использовать

// 多个校验规则校验一个规则
{
  name: [
    {
      type: "string",
      required: true,
      validator(rule, value) {
        return value === "muji"
      },
      transform(value) {
        return value + "i"
      },
      message: "输入错误"
    },
    {
      validator(rule, value, callback, source, options) {
        const errors = []
        if (value.length < 10) {
          errors.push("长度不够")
        }
        // 当符合第一个规则之后，才会进行后面的校验
        return ["errors"]
      }
    }
  ]
}

type

флаг для использованияvalidatorизtype,узнаваемыйtypeЗначение:

  • string: должен быть типаstring, который является типом по умолчанию.
  • number: должен быть типаnumber.
  • boolean: должен быть типаboolean.
  • method: должен быть типаfunction.
  • regexp: должно бытьRegExpэкземпляр илиstring, Используйте это новоеRegExpне может сообщить об ошибках.
  • integer: должен быть типаnumberи является целым числом.
  • float: должен быть типаnumberи является числом с плавающей запятой.
  • array: должен бытьarray ,Зависит отArray.isArrayКонечно.
  • object: должен быть типаobjectа такжеArray.isArrayвернутьfalse.
  • enum: значение должно быть вenumсуществуют в.
  • date: значение должно быть допустимым, заданнымDateКонечно.
  • url: должен быть типаurl.
  • hex: должен быть типаhex.
  • email: должен быть типаemail.
  • any: может быть любого типа.

Required

ruleАтрибутыrequiredУказывает, что при проверкеfieldДолжен бытьsourceсуществует на объекте

Pattern

ruleАтрибутыpatternУказывает, что значение должно пройти проверку регулярного выражения при проверке.

Range

использоватьminа такжеmaxОбласть определения атрибута. дляstringа такжеarrayтипа, согласноlengthсвойства сравниваются дляnumberтип, число не может быть меньшеmin, не болееmax.

Length

Проверятьfieldточную длину, пожалуйста, укажитеlenАтрибуты. дляstringа такжеarrayСравнение типов находится вlengthосуществляется на объекте, дляnumberТип, этот атрибут представляет собой точное совпадение числа, то есть может быть строго равен толькоlen. еслиlenатрибут сminа такжеmaxДва свойства диапазона используются в комбинации,lenприоритет.

Enumerable

Начиная с версии 3.0.0, если вы хотите проверить >enumзначение типа >0или >false, вы должны указать их явно. Чтобы проверить значения в списке всех возможных значений, используйтеenumтип иenumАтрибут перечисляет допустимые значения для поля, например:

const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};
Категории