So verwenden Sie Vue und Element-UI, um komplexe Validierungslogik von Formularen zu implementieren

So verwenden Sie Vue und Element-UI, um komplexe Validierungslogik von Formularen zu implementieren

Einführung:
Bei der Entwicklung von Webanwendungen ist die Formularvalidierung eine häufig auftretende Anforderung. Durch die Formularvalidierung kann sichergestellt werden, dass vom Benutzer eingegebene Daten bestimmten Formaten oder Regeln entsprechen, wodurch die Datengenauigkeit und Anwendungsstabilität verbessert werden. In diesem Artikel wird die Verwendung von Vue und Element-UI zur Implementierung komplexer Validierungslogik von Formularen vorgestellt und den Lesern relevante Codebeispiele bereitgestellt.

1. Einführung in Element-UI
Element-UI ist eine auf Vue.js entwickelte Desktop-Komponentenbibliothek. Sie bietet eine Reihe benutzerfreundlicher und schöner UI-Komponenten wie Tabellen, Formulare, Schaltflächen usw. Element-UI verfügt über viele integrierte Formularüberprüfungsfunktionen, mit denen einfache Überprüfungslogik problemlos implementiert werden kann.

2. Grundprinzip der Formularüberprüfung: Das Grundprinzip der Formularüberprüfung besteht darin, den vom Benutzer eingegebenen Wert durch Überwachung des Änderungsereignisses des Formularelements zu erhalten und ihn dann gemäß einer Reihe voreingestellter Regeln zu überprüfen. Wenn die Überprüfung erfolgreich ist, wird der Status des Formularelements in „Überprüfung bestanden“ geändert. Andernfalls wird eine Fehlermeldung angezeigt und der Status des Formularelements wird in „Überprüfung fehlgeschlagen“ geändert.

Zuerst müssen wir die Form- und FormItem-Komponenten von Element-UI einführen und diese Komponenten dann in der Vue-Vorlage verwenden, um das Formular zu erstellen. Im angegebenen Formularelement können Sie Validierungsregeln definieren, indem Sie das Regelattribut festlegen, wie unten gezeigt:

return {

form: {
  username: '',
  password: ''
},
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

}
Im Regelobjekt können wir mehrere Überprüfungsregeln definieren, z. B. erforderliche Längenbeschränkungen , usw. Das Nachrichtenattribut definiert die Fehlermeldung und das Triggerattribut definiert das durch die Überprüfung ausgelöste Ereignis.

validateForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
In der Methode „validateForm“ nennen wir dies.$ refs. myForm.validate()-Methode zum Auslösen der Formularvalidierung. Das Überprüfungsergebnis wird durch die Rückruffunktion valid geleitet. Wenn die Überprüfung erfolgreich ist, wird eine Erfolgsmeldung angezeigt, andernfalls wird eine Fehlermeldung angezeigt.

Manchmal müssen wir eine komplexere Überprüfungslogik implementieren, z. B. den Vergleich, ob die Werte zweier Eingabefelder gleich sind, die Überprüfung von E-Mail-Adressen, die Überprüfung von Mobiltelefonnummern usw. In diesem Fall können wir benutzerdefinierte Validierungsregeln verwenden.

return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
Im Regelobjekt können wir benutzerdefinierte Validierungsregeln definieren, wo der Validator Das Attribut definiert die Validierungsfunktion.

validatePassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

validateConfirmPassword(rule, value, callback) {

if (value !== this.form.password) {
  callback(new Error('两次输入的密码不一致'))
} else {
  callback()
}

}
In der benutzerdefinierten Überprüfungsfunktion können wir das Überprüfungsergebnis übergeben, indem wir die Rückruffunktion aufrufen. Wenn die Überprüfung erfolgreich ist, wird callback() aufgerufen, andernfalls wird callback(new Error('error message')) aufgerufen.