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:

d477f9ce7bf77f53fbcf36bec1b69b7a

a51093cfdf79e73df1581bd23e14a5ff

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c

21c97d3a051048b8e55e3c8f199a54b2
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:

92c18013b2ff346458cc77df38db5e2d

f498470e5795abbb811a5ba58e19a1153950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
188bc5ba182c1014d86fa43f3b857446
0fef7dbb813f9e81977b6ba14582c5ba3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
e5565351d5cc2db6c57560371edb6042
8f4226748e5b021d2e67e8e4541dcc883950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
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:

d477f9ce7bf77f53fbcf36bec1b69b7a

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
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' }
    ]
  }
}

},
methods: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用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!