So verwenden Sie die Elementformularvalidierung in Vue

Dieser Artikel stellt hauptsächlich die Verwendung der Elementformularüberprüfung in Vue vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

Elementformularüberprüfung (2)

Im vorherigen Artikel ging es um die Grundelemente von async-validator. Wie man es in Element verwendet und wie man es elegant nutzt, erfahren Sie in diesem Artikel.

Wie im vorherigen Artikel erwähnt, async-validator besteht aus 3 Hauptteilen

• Options

• Validate

• Rules

Der grundlegende Überprüfungsprozess ist wie folgt

• Formulieren Sie zunächst jede Regel gemäß den Regeln Feldspezifikationen, Regeln generieren

• Validator basierend auf Regeln generierenconst validator = new Validator(rules)

• Der Validator verfügt über eine Verifizierungsfunktionvalidator.validate(source, callback)

• Die Felder in der Quelle entsprechen den Feldern in der Regel

Der validator.validate oben entspricht dem this.$refs[refName].validate in Element , wurde jedoch geändert. Und wenn <el-form :model=&#39;form&#39;> in Element definiert ist, ist dieses :model='form' form. Der Feldname von source, beispielsweise source, ist source.name. Solange form.name denselben Feldnamen <el-form-item prop=&#39;name&#39;> wie source festlegt, kann er mit name in <el-form :rules=&#39;rules&#39;> übereinstimmen. rules.name

Es ist sehr wichtig, dass

und rules.字段名 zur Verifizierung gleich sein müssen. 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>

rrree

Die obige Funktion

wurde dem Attribut auf dem DOM-Knoten des Formularelements hinzugefügt. Dann gibt es oben einen schlechten Punkt. Das heißt, die Art und Weise, wie die Regeln definiert werden, ist nicht flexibel genug. validate(callback)

Zum Beispiel habe ich zwei Felder

und firstName. lastName ist erforderlich, während firstName optional ist; und die Länge von lastName muss größer als 1 und kleiner als 4 sein, während die Länge von firstName größer als 1 und kleiner als 6 sein muss . Dann müssen wir zwei verschiedene Regeln schreiben. Jetzt sind es nur noch zwei Felder, nichts. Wenn es viele Felder mit unterschiedlichen Anforderungen gibt, müssen wir dann viele verschiedene Regeln schreiben? Ist es nicht nervig? Kann es wiederverwendet werden? lastName

Regeln drei Definitionsmethoden

• Funktionsmethode:

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

• Objektmethode:

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

• Array-Methode:

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

Die Funktionsmethode ist sehr leistungsfähig. Wenn Sie

verwenden müssen, können Sie Function verwenden Methoden, die am häufigsten verwendeten Methoden sind Objekte und Arrays. Mittlerweile werden mehrere Wiederverwendungsmethoden empfohlen. options

Einfache Kapselung einiger häufig verwendeter Regeln

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

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

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

Kapselung einer speziell für Regeln erstellten Klasse, Kettenaufruf

// 返回一个规则数组，必填且字符串长度在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; }
])

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für alle nützlich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Grundelemente der Elementformvalidierung in Vue

So lösen Sie Attribute für in-Objekte in Vue-Probleme mit nicht negativen ganzen Zahlen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Elementformularvalidierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!