Comment utiliser la validation du formulaire d'élément dans vue

Cet article présente principalement l'utilisation de la vérification du formulaire d'élément 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

Vérification du formulaire d'élément (2)

L'article précédent parlait des éléments de base de

, donc comment l'utiliser dans Element et comment l'utiliser avec élégance se trouve dans cet article. async-validator

Comme mentionné dans l'article précédent,

se compose de 3 parties principales async-validator

• Options

• Validate

• Rules

Le processus de vérification de base est le suivant

• Tout d'abord, formulez chaque règle selon les règles Spécifications du champ, générer des règles

• Générer un validateur basé sur des règles

  const validator = new Validator(rules)

• Le validateur a une fonction de vérification

  validator.validate(source, callback)

• Les champs de la source correspondent aux champs de la règle. Le rappel est appelé après toute réussite ou erreur.

Le

ci-dessus correspond au validator.validate dans Element , mais il a été modifié. Et lorsque this.$refs[refName].validate est défini dans Element, cela <el-form :model=&#39;form&#39;> est :model='form'. Le nom de champ de form, tel que source est source, alors tant que source.name définit le même nom de champ form.name que <el-form-item prop=&#39;name&#39;>, il peut correspondre au source dans name. <el-form :rules=&#39;rules&#39;>rules.nameIl est très important que

et

soient identiques pour la vérification. rules.字段名source.字段名

<template>
  <el-form :model=&#39;form&#39; ref=&#39;domForm&#39; :rules=&#39;rules&#39;>
    <el-form-item prop=&#39;name&#39; lable=&#39;名字&#39;>
      <el-input v-model=&#39;form.name&#39;>
    </el-form-item>
  </el-form>
</template>

La fonction

export default {
  data() {
    this.rules = {
      name: { type: 'string', required: true, trigger: 'blur' }
    }

    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    submit() {
      this.$refs.domForm.validate(valid => {
        if (!valid) {
          // 验证不通过
        }

        // 验证通过后的处理...
      })
    }
  }
}

ci-dessus a été ajoutée à l'attribut sur le nœud DOM de l'élément de formulaire. Ensuite, il y a un mauvais point ci-dessus. La façon dont les règles sont définies n'est pas assez flexible.

validate(callback)Par exemple, j'ai deux champs

et

. firstName est obligatoire, tandis que lastName est facultatif ; et la longueur de firstName doit être supérieure à 1 et inférieure à 4, tandis que la longueur de lastName doit être supérieure à 1 et inférieure à 6. . Ensuite, nous devons écrire deux règles différentes. Maintenant, ce n'est que 2 champs, rien. S'il y a de nombreux champs avec des exigences différentes, alors nous devons écrire de nombreuses règles différentes et de nombreuses règles ? N'est-ce pas ennuyeux ? Peut-il être réutilisé ? firstNamelastName

Règles trois méthodes de définition

Méthode de fonction :

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

Méthode d'objet :

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

Méthode Array :

• { name: [{ type: 'string' }, { required: true }] }

La méthode fonction est très puissante, si vous avez besoin d'utiliser

vous pouvez Fonction méthodes, les méthodes les plus couramment utilisées sont les objets et les tableaux. Plusieurs méthodes de réutilisation sont désormais recommandées.

optionsEncapsulation simple de certaines règles couramment utilisées

Encapsulation d'une classe spécifiquement créée pour les règles, appels en chaîne

// 返回一个规则数组，必填且字符串长度在2~10之间
export const name = (msg, min = 2, max = 10, required = true) => ([
  { required, message: msg, trigger: 'blur' },
  { min, max, message: `长度在${min}~${max}个字符`, trigger: 'blur' }
])

// 邮箱
export const email = (required = true) => ([
  { required, message: '请输入邮箱', trigger: 'blur' },
  { type: 'email', message: '邮箱格式不对', trigger: 'blur' }
])

/* 自定义验证规则 */

// 大于等于某个整数
const biggerAndNum = num => (rule, v, cb) => {
  const isInt = /^[0-9]+$/.test(v)
  if (!isInt) {
    return cb(new Error('要求为正整数'))
  }

  if (v < num) {
    return cb(new Error(`要求大于等于${num}`))
  }
  return cb()
}

export const biggerInt = (int, required = true) => ([
  { required, message: &#39;必填&#39;, trigger: &#39;blur&#39; },
  { validator: biggerAndNum(int), trigger: &#39;blur&#39; }
])

Ce qui précède est tout le contenu de ce article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

export default class CreateRules {
  constructor() {
    super()
    this.rules = []
  }

  need(msg = '必填', trigger = 'blur') {
    this.rules.push({
      required: true,
      message: msg,
      trigger
    })
    return this
  }
  
  url(message = '不是合法的链接', trigger = 'blur') {
    this.rules.push({
      type: 'url',
      trigger,
      message
    })
    return this
  }

  get() {
    const res = this.rules
    this.rules = []
    return res
  }
}

const createRules = new CreateRules()

//规则
const needUrl = createRules.need().url().get()
const isUrl = createRules.url().get()

// imgUrl必填且是链接；href可选不填，如果填写必须是链接
const rules = {
  imgUrl: needUrl,
  href: isUrl
}

// deep rule 定义
// urls是数组，长度大于1
// urls的元素是链接
const urls = ['http://www.baidu.com', 'http://www.baidu.com']

const rules = {
  urls: {
    type: 'array',
    min: 1,
    defaultField: isUrl
  }
}

Recommandations associées :

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

Comment résoudre les attributs lorsque pour des objets dans Problèmes Vue avec les entiers non négatifs

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!