vue は ID カードと照合して成人かどうかを確認します

Vue は、Web サイトやアプリケーションの開発によく使用される、人気のあるフロントエンド フレームワークです。実際の開発では、ユーザーが入力したID番号を認証する必要がよくありますが、その認証の一つとしてユーザーが成人かどうかを判定するため、今回はVueを使ってIDカードが成人かどうかを照合する方法を紹介します。

ID番号は18桁で構成されており、最初の17桁は地域と生年月日、最後の1桁はチェックデジットです。生年月日の形式はYYYYMMDDで、年は4桁、月日は2桁で表されます。 ID番号の生年月日と現在の日付を比較することで、利用者が成人に達しているかどうかを判断します。

Vue では、計算属性を使用して ID 番号の生年月日と現在の日付を計算し、それらを比較できます。計算プロパティは、依存する値に基づいて新しい値を自動的に計算できる Vue の計算プロパティです。

以下は、生年月日と現在の日付を計算し、その 2 つが 18 歳以上離れているかどうかを比較する簡単な Vue コード例です。

<template>
  <div>
    <input v-model="idCardNumber" placeholder="请输入身份证号码">
    <button @click="checkAge">验证</button>
    <p v-if="isAdult">该用户已经成年</p>
    <p v-else>该用户未成年</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idCardNumber: '',
    }
  },
  computed: {
    birthDate() {
      const year = this.idCardNumber.slice(6, 10)
      const month = this.idCardNumber.slice(10, 12) - 1
      const day = this.idCardNumber.slice(12, 14)
      return new Date(year, month, day)
    },
    currentDate() {
      return new Date()
    },
    isAdult() {
      const yearDiff = this.currentDate.getFullYear() - this.birthDate.getFullYear()
      const monthDiff = this.currentDate.getMonth() - this.birthDate.getMonth()
      const dayDiff = this.currentDate.getDate() - this.birthDate.getDate()
      const age = yearDiff + (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0) ? -1 : 0)
      return age >= 18
    },
  },
  methods: {
    checkAge() {
      if (!this.idCardNumber || this.idCardNumber.length !== 18) {
        alert('请输入正确的身份证号码')
        return
      }
    },
  },
}
</script>

上記のコードでは、 first v-model ディレクティブは、ユーザーが ID 番号を入力できる入力ボックスを idCardNumber データ オブジェクトにバインドするために使用されます。ユーザーがボタンをクリックすると、checkAge() メソッドが呼び出され、ID 番号が正しいかどうかが確認されます。

計算された属性では、birthDate 属性と currentDate 属性を定義します。これらは、それぞれ ID 番号の誕生日と現在の日付を取得するために使用されます。次に、isAdult 属性を使用してユーザーの年齢を計算します。 isAdult は、ユーザーの年齢が 18 歳以上の場合は true を返し、それ以外の場合は false を返します。

最後に、テンプレートの v-if および v-else 命令を使用して、isAdult の値に基づいてさまざまなメッセージを表示し、ユーザーが成人かどうかを示します。

このサンプル コードは単なる例であり、実際のニーズに応じてカスタマイズおよび拡張できます。たとえば、入力された ID 番号が正当であることを確認するために、より厳格な ID カード検証コードを追加できます。さらに、ID 検証コードを別のコンポーネントにカプセル化して、アプリケーション内で再利用できます。

つまり、Vue を使用して ID カードが成人かどうかを照合することは、ユーザー入力をより適切に処理し、ユーザーのプライバシーを保護するのに役立つ非常に実用的な機能です。この記事が、読者が Vue で ID カード検証を実行する方法、および ID カード検証機能を拡張およびカスタマイズする方法をよりよく理解するのに役立つことを願っています。

以上がvue は ID カードと照合して成人かどうかを確認しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。