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.

3. Verwenden Sie Element-UI zur einfachen Formularüberprüfung.

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:

Das Formularobjekt in den Daten speichert den Wert jedes Eingabefelds im Formular, und das Regelobjekt definiert jede Eingabe Frame-Validierungsregeln.

In den Daten von Vue können wir Formular- und Regelobjekte wie folgt definieren:

data() {

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.

In den Methoden von Vue können wir die Methode „validateForm“ definieren, um das Formular zu validieren. Der Code lautet wie folgt:

Methoden: {

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.

4. Komplexe Überprüfungslogik implementieren

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.

Zuerst können wir in den Daten von Vue benutzerdefinierte Validierungsregeln definieren, wie unten gezeigt:

data() {

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.

Dann können wir in den Methoden von Vue eine benutzerdefinierte Validierungsfunktion wie folgt definieren:

Methoden: {

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.

Verwenden Sie abschließend die benutzerdefinierten Validierungsregeln in der Vue-Vorlage, wie unten gezeigt:

< type="password" v-model="form.password">




in der Anpassung Unter den Verifizierungsregeln , können wir das Typattribut verwenden, um die Überprüfungsregeln anzugeben, die Element-UI integriert hat. Beispielsweise kann die E-Mail-Regel implementiert werden, indem das Typattribut auf „E-Mail“ gesetzt wird.

Zusammenfassung:

Dieser Artikel stellt vor, wie man Vue und Element-UI verwendet, um komplexe Validierungslogik von Formularen zu implementieren. Mithilfe der von Element-UI bereitgestellten Form- und FormItem-Komponenten können wir auf einfache Weise Formulare erstellen und Validierungsregeln definieren, indem wir das Rules-Attribut festlegen. Für komplexe Verifizierungslogik können wir benutzerdefinierte Verifizierungsregeln und Verifizierungsfunktionen implementieren. Ich hoffe, dass dieser Artikel allen dabei hilft, Vue und Element-UI zur Formularüberprüfung zu verstehen und zu verwenden.

Codebeispiel:

Hier ist ein vollständiger Beispielcode:

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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' } ] } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>validateForm() { this.$refs.myForm.validate((valid) =&gt; { if (valid) { this.$message({ type: 'success', message: '表单校验通过' }) } else { this.$message.error('表单校验失败') return false } }) }</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p> <p>}<br>}<br></script>

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um komplexe Validierungslogik von Formularen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!