Éléments de base de la validation du formulaire d'élément dans Vue

Cet article présente principalement les éléments de base de la validation du formulaire Element dans Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Element utilise principalement le validateur asynchrone. la bibliothèque est principalement divisée en trois parties comme validation de formulaire

async-validator

• Valider

• Options

• Règles

Parmi elles, les règles sont la plus importante pour nous lors de l'utilisation d'Element, et c'est aussi la partie avec le plus de contenu.

Parties du validateur asynchrone

Utilisation de base du validateur asynchrone

import Validator from 'async-validator'

// 规则的描述
const rules = {
  name: { type: 'string', required: true }
}

// 根据规则生成验证器
const validator = new Validator(rules)

// 要验证的数据源
const source = {
  name: 'LanTuoXie'
}

// 验证后的回调函数
function callback (errors, fileds) {
  if (errors) {
    // 验证不通过，errors是一个数组，记录那些不通过的错误信息
    // fileds是所有数据源的字段名，也即上面的source的'name'
    // 验证是根据字段名来的，rules.name 对应 source.name。 字段名要一样才会验证
  }
  // 下面是验证通过的逻辑
}

// 验证数据源是否符合规则
validator.validate(source, callback)

Valider

Il s'agit de validator.validate dans l'exemple ci-dessus, qui est une fonction

function(source, [options], callback)

source et rappel correspondant à l'exemple ci-dessus.

Options

Options a deux valeurs

• first : une valeur booléenne, si le champ n'est pas passé, Terminez le champ derrière la validation

• firstFields : Valeur booléenne ou chaîne si une règle ne passe pas lors de la validation d'un champ, terminez la validation de la règle suivante (un champ. , plusieurs règles) )

firstFields est utilisé lorsqu'il existe plusieurs règles pour un seul champ, tandis que first est utilisé pour tous les champs

Règles

La chose la plus importante, ce sont les règles. Les règles peuvent être définies sous trois formes, mais le nom du champ des règles doit être cohérent avec le nom du champ de la source de données.

• Mode fonction : { name(rule, value, callback, source, options) {} }

• Mode objet : { name: { type: 'string', required: true } }

• Méthode tableau : { name: [{ type: 'string' }, { required: true }] }

Comme vous pouvez le voir ci-dessus, le nom du champ peut être défini de trois manières Lors de l'utilisation d'Element, les méthodes objet et tableau sont toujours recommandées. est relativement simple et la fonction est utilisée en fonction de la situation.

En plus de type et required, quels autres usages peuvent être utilisés et quels sont leurs usages ?

Règles par défaut des règles

• type : Les types de données à vérifier sont tels que url et number, etc.

• required : Est-ce obligatoire ?

• pattern : Utilisez des expressions régulières pour vérifier

• min : La longueur des données Valeur minimale de (le type de données doit être string ou array)

• max : Valeur maximale de la longueur des données (le type de données doit être string ou array )

• len : La longueur de la donnée doit être égale à cette valeur (le type de donnée doit être string ou array)

• enum : La valeur de la donnée doit être égale à un certain élément de ce tableau d'énumération { enum: [1, 2, 3] }

• transform : Une fonction hook qui peut traiter les données puis les vérifier avant de commencer la vérification. Par exemple, convertir number en string puis vérifier

• message : L'erreur. le message peut être une chaîne ou une balise jsx <span>Name is required</span>

• validator : Fonction de vérification personnalisée et message d'erreurvalidator(rule, value, callback)

• Là est également une Deep Rules qui gère les types object ou array, utilisée fields ou defaultField

• fields : utilisée lorsque Deep Rules est utilisée pour définir le champ noms et règles de la couche suivante

• defaultField : Utilisé lors de l'utilisation de Deep Rules. Tous les champs de la couche suivante adopteront cette règle et pourront être remplacés par fields

  .

Type par défaut

• string : Doit être de type String Si la règle ne définit pas le type, la valeur par défaut est celle-ci

  <. 🎜>

•  : doit être de type Nombre, si les données renvoyées par l'arrière-plan sont un caractère. Les chaînes peuvent être converties en type Nombre en utilisant number. Les nombres de type chaîne ('12') ne le seront pas. pass Veuillez noter que transform

•  : doit être de type booléen boolean

•  : doit être une fonctionmethod<🎜. >

•  : doit être un RegExp régulier

  regexp

•  : C'est un entier positif de type Nombre

  integer

•  : Il s'agit d'un nombre à virgule flottante de type Number

  float

•  : Il s'agit d'un Array passé par isArray

  array

.
•  : Type d'objet non transmis par Array.isArray

  object

•  : Enum doit être défini en premier, puis La valeur doit être une certaine valeur d'enum

  enum

•  : doit être une instance de l'objet Date

  date

•  : Type de chaîne et conforme au format du lien

  url

• hex

•  : De type chaîne, et conforme au format email

Deep Rules使用demo

cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组，
const rules = {
  urls: {
    type: 'array',
    required: true,
    defaultField: { type: 'url' }
  }
}

const ids = {
  name: 'LanTuoXie',
  age: 12,
  spc: '帅'
}

const rules = {
  ids: {
    type: 'object',
    required: true,
    fields: {
      name: { type: 'string', required: true },
      age: { type: 'number', required: true, tranform: Number },
      spc: { type: 'string', required: true }
    }
  }
}

自定义验证validator

validator(rule, value, callback)

• rule: 记录了验证字段的字段名以及规则的信息

• value: 要验证的值

• callback: 如果callback()代表验证通过，如果callback(new Error('错误要提示的信息'))代表验证不通过

// 验证是[min, max]范围内的正整数
const betweenInt = (min, max) => (rule, v, cb) => {
  const isBetween = v >= min && v <= max
  const isInt = /^[0-9]+$/.test(v)
  if (isBetween && isInt) return cb()

  return cb(new Error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))
}

const rules = {
  num: { validator: betweenInt(1, 5), required: true }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！ 

 相关推荐：

vue项目中如何实现保存头像以及base64字符串转图片的功能

Vue中for in对象时如何解决属性为非负整数的问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!