uniapp でフォーム検証とデータ検証を実装する方法-uni-app-php.cn

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'
    })
  }
})

ログイン後にコピー

}
}

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

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

3. コード例

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

<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>

ログイン後にコピー

< /view>

人気のチュートリアル

詳細>