So implementieren Sie Formularvalidierung und Datenvalidierung in Uniapp
Zusammenfassung: In der Uniapp-Entwicklung sind Formularvalidierung und Datenvalidierung ein wesentlicher Bestandteil. In diesem Artikel wird detailliert beschrieben, wie Formularvalidierung und Datenüberprüfung in Uniapp implementiert werden, und es werden spezifische Codebeispiele bereitgestellt.
1. Einführung des Uni-Validate-Plug-Ins
Uni-Validate ist ein offiziell von uniapp bereitgestelltes Formularverifizierungs-Plug-In, das die Formular- und Datenüberprüfung problemlos implementieren kann. Fügen Sie zunächst den Einführungscode des Uni-Validate-Plug-Ins in den Abhängigkeiten der Datei package.json im Stammverzeichnis des Uniapp-Projekts hinzu:
"dependencies": {
...
"uni-validate": "^1.0.0 "
}
Führen Sie dann den Befehl npm install im Projektstammverzeichnis aus, um das Plug-in zu installieren:
npm install uni-validate --save
Zweitens führen Sie das uni-validate-Plugin ein und verwenden es -in auf der Seite
Wenn Sie die Formularvalidierung verwenden müssen und führen Sie auf der Seite zur Datenüberprüfung zunächst das uni-validate-Plug-in ein:
import uniValidate from '@/uni_modules/uni-validate/index.js'
Erstellen Sie dann ein Formularvalidierungsregelobjekt in den Daten der Seite, zum Beispiel:
data() {
return {
formRules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' }, ... ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, ... ], ... }, formData: { username: '', password: '', ... },
}
},
Als nächstes fügen Sie eine Formularvalidierungsmethode in den Methoden der Seite hinzu:
Methoden: {
// Formularübermittlung
formSubmit() {
this.$refs['form'].validate(valid => { if (valid) { // 表单验证通过，执行表单提交操作 ... } else { // 表单验证不通过，弹出提示 uni.showToast({ title: '请填写必填项', icon: 'none' }) } })
}
}
Fügen Sie abschließend in der Vorlage der Seite die entsprechenden Validierungsregeln für die Eingabekomponente hinzu, die eine Formularvalidierung erfordert, zum Beispiel:
Im Formular senden Fügen Sie ein Klickereignis für die Schaltflächenkomponente hinzu:
3. Codebeispiel
Das Folgende ist ein vollständiger Beispielcode, der zeigt, wie das Uni-Validate-Plug-in zum Implementieren der Formularvalidierung und Datenüberprüfung in Uniapp verwendet wird:
// index.vue
< /template>
