UniApp實作鍵盤輸入與輸入框校驗的實作方法-uni-app-PHP中文網

UniApp實作鍵盤輸入與輸入框校驗的實作方法

WBOY

發布： 2023-07-06 13:34:36

原創

3293 人瀏覽過

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>與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，則顯示輸入方塊下方的錯誤提示文字。

除了校驗手機號碼，我們還可以校驗其他類型，例如信箱、密碼等。透過使用不同的正規表示式，我們可以實現各種類型的輸入框校驗。