So implementieren Sie Formularvalidierung und Datenüberprüfung in Uniapp

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:

Senden

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

<input v-model="formData.username" :rules="formRules.username" placeholder="请输入用户名" />
<input v-model="formData.password" :rules="formRules.password" placeholder="请输入密码" />
<button form-type="submit" @click="formSubmit">提交</button>

<script><br>import uniValidate from '@/uni_modules/uni-validate/index.js'</script>

export Standard {
data() {

return {
  formRules: {
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
  },
  formData: {
    username: '',
    password: '',
  },
}

},
Methoden: {

// 表单提交
formSubmit() {
  this.$refs['form'].validate(valid => {
    if (valid) {
      // 表单验证通过，执行表单提交操作
      console.log('表单验证通过')
    } else {
      // 表单验证不通过，弹出提示
      uni.showToast({
        title: '请填写必填项',
        icon: 'none'
      })
    }
  })
}

}
}

Zusammenfassung: Durch Einführung des Uni-Validate-Plug-Ins und Kombination mit dem Formularvalidierungsregelobjekt Die Formularvalidierungs- und Datenüberprüfungsfunktionen können einfach in uniapp implementiert werden. Mithilfe der oben genannten Codebeispiele können Sie die Formularvalidierungs- und Datenvalidierungsfunktionen in Ihrem Uniapp-Projekt schnell anwenden und flexibel anpassen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Formularvalidierung und Datenüberprüfung in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!