uniapp でフォーム検証とデータ検証を実装する方法

uniapp でフォーム検証とデータ検証を実装する方法

要約: uniapp 開発では、フォーム検証とデータ検証は重要な部分です。この記事では、uniapp でフォーム検証とデータ検証を実装する方法を詳しく紹介し、具体的なコード例を示します。

1. uni-validate プラグインの紹介

Uni-validate は、uniapp が公式に提供しているフォーム検証とデータ検証を簡単に実装できるフォーム検証プラグインです。まず、uniapp プロジェクトのルート ディレクトリにある package.json ファイルの依存関係に uni-validate プラグインの導入コードを追加します:

"dependency": {
...
"uni-validate": "^1.0.0"
}

次に、プロジェクトのルート ディレクトリで npm install コマンドを実行してプラグインをインストールします:

npm install uni-validate --save

2. ページで uni-validate プラグインを導入して使用します

フォーム検証とデータ検証を使用する必要があるページでは、最初に uni-validate プラグインを導入します。 validate プラグイン:

import uniValidate from ' @/uni_modules/uni-validate/index.js'

次に、ページのデータにフォーム検証ルール オブジェクトを作成します。次に例を示します。

data() {
return {

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

}
},

次に、ページのメソッドにフォーム検証メソッドを追加します。

methods: {
// フォームの送信
formSubmit() {

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

}
}

最後に、ページのテンプレートに、フォーム検証を必要とする入力コンポーネントの対応する検証ルール。例:

;< p>

クリック イベントを追加しますフォーム送信のボタン コンポーネント:

Submit

3. コード例

以下は、uni-validate プラグインの使用方法を示す完全なコード例です。uniapp でフォーム検証およびデータ検証関数を実装します。 template>

  提交