UniApp でキーボード入力と入力ボックスの検証を実装する方法

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを同時に生成できます。 UniApp では、入力ボックスの検証、リアルタイムの入力フィードバックなど、いくつかのフォーム入力機能を実装する必要があることがよくあります。この記事では、UniApp でキーボード入力と入力ボックスの検証を実装する方法をコード例とともに紹介します。

キーボード入力

UniApp では、通常、<input> タグを使用してキーボード入力機能を実装します。たとえば、次のコード例を使用して携帯電話番号入力ボックスを実装できます。

<template>
  <view>
    <input type="tel" placeholder="请输入手机号" v-model="mobile">
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mobile: ''
      };
    }
  }
</script>

上記のコードでは、v-model 命令を使用して <input&gt ;mobile とバインドされ、双方向のデータ バインディングを実現します。ユーザーが入力ボックスに携帯電話番号を入力すると、入力した内容をリアルタイムで mobile 属性に割り当てることができます。

UniApp は、一般的なテキスト入力タイプに加えて、数値入力、パスワード入力などの他のタイプの入力もサポートしています。さまざまな type 属性を設定することで、さまざまなタイプの入力ボックスを実装できます。

入力ボックスの検証

実際の開発では、携帯電話番号が仕様を満たしているか、パスワードが要件を満たしているかなど、ユーザー入力の正当性を検証する必要があることがよくあります。 。 UniApp では、正規表現と watch リスニング関数を通じて入力ボックスの検証を実装できます。

次は、携帯電話番号検証を実装する簡単な例です。これには、携帯電話番号が 11 桁である必要があります:

<template>
  <view>
    <input type="tel" placeholder="请输入手机号" v-model="mobile">
    <text v-show="!isMobileValid">手机号格式不正确</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
      isMobileValid: true
    };
  },
  watch: {
    mobile(newVal) {
      const reg = /^(1[3-9])d{9}$/;
      this.isMobileValid = reg.test(newVal);
    }
  }
};
</script>

上記のコードでは、watch# を渡します。 ##mobile 属性の変更を監視するリスニング関数。入力ボックスの内容が変更されるたびに、リスニング機能がトリガーされます。リスニング機能では、正規表現を使用して、入力された携帯電話番号が正当であるかどうかを確認し、その結果を isMobileValid 属性に割り当てます。携帯電話番号が正当で、isMobileValid 属性値が true の場合、入力ボックスの下にエラー テキストが表示されます。

携帯電話番号の検証に加えて、電子メール、パスワードなどの他のタイプも検証できます。さまざまな正規表現を使用することで、さまざまなタイプの入力ボックス検証を実装できます。

概要

UniApp では、キーボード入力と入力ボックスの検証を実装することが非常に一般的な要件です。

<input> タグと v-model ディレクティブを使用すると、キーボード入力機能を簡単に実装でき、watch listen 関数を使用して実装できます。正規表現と組み合わせた入力ボックスの検証。この記事の紹介が、UniApp 開発における入力関数の実装を改善するのに役立つことを願っています。

以上がUniApp でキーボード入力と入力ボックスの検証を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。