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

}
}

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

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

Submit

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>

<script><p>import uniValidate from '@/uni_modules/ uni-validate/index.js'<br>エクスポートデフォルト {<p> data() {<br><pre class='brush:php;toolbar:false;'>return { formRules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' }, ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, ], }, formData: { username: '', password: '', }, }</pre>},<p> メソッド: {<br><pre class='brush:php;toolbar:false;'>// 表单提交 formSubmit() { this.$refs['form'].validate(valid =&gt; { if (valid) { // 表单验证通过，执行表单提交操作 console.log('表单验证通过') } else { // 表单验证不通过，弹出提示 uni.showToast({ title: '请填写必填项', icon: 'none' }) } }) }</pre>}<p> }<br></script>

要約: 合格 uni-validate プラグインを導入し、フォーム検証ルール オブジェクトと組み合わせることで、uniapp にフォーム検証およびデータ検証機能を簡単に実装できます。上記のコード例を通じて、uniapp プロジェクトにフォーム検証機能とデータ検証機能を迅速に適用し、柔軟に調整できます。

以上がuniapp でフォーム検証とデータ検証を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。