携帯電話番号が合法かどうかを判断するWeChatアプレットのサンプルコード

携帯電話番号が合法かどうかを判断するWeChatアプレットのサンプルコード

シナリオ

登録ページに携帯電話番号を入力し、登録インターフェイスを要求する前に、入力した携帯電話番号が合法かどうかを確認してください。

効果

コード

vant-weapp コンポーネントをインポートする: user-register.json

{
  "コンポーネントの使用": {
  	"van-cell-group": "@vant/weapp/cell-group/index",
  	"van-field": "@vant/weapp/field/index",
  	"van-ドロップダウンメニュー": "@vant/weapp/ドロップダウンメニュー/インデックス",
  	"van-ドロップダウンアイテム": "@vant/weapp/ドロップダウンアイテム/インデックス",
  	"van-button": "@vant/weapp/button/index"
  }
}

レイアウトファイルを書きます: user-register.wxml

<!-- pages/user-register/user-register.wxml -->
<view class="register-block">
  <view class="title">
    <text class="text">登録</text>
  </ビュー>
  <バンセルグループクラス="input">
    <van-field label="学号" value="{{ studentNumber }}" placeholder="学生番号を入力してください" required clearable center bind:blur="setStudentNumber" />
    <van-field label="ユーザー名" value="{{ userName }}" placeholder="ユーザー名を入力してください" 必須 クリア可能 中央 bind:blur="setUsername" />
    <van-field label="Class" value="{{ className }}" placeholder="クラスを入力してください" 必須 クリア可能 中央 bind:blur="setClassName" />
    <van-field label="電話番号" value="{{ phoneNumber }}" placeholder="電話番号を入力してください" error="{{ phoneLength || phoneFormat }}" error-message="{{ phoneError }}" required clearable center bind:blur="setphoneNumber" />
    <van-field label="性別" 必須入力スロット>
      <view style="position: absolute; left: -16rpx;" slot="input">
        <ドロップダウンメニューアクティブカラー="#92B6D5">
          <van-dropdown-item value="{{ 性別 }}" options="{{ option1 }}" bind:change="changeGender" />
        </ドロップダウンメニュー>
      </ビュー>
    </ヴァンフィールド>
    <van-field label="キャンパス" 必須の入力スロット>
      <view style="position: absolute; left: -16rpx;" slot="input">
        <ドロップダウンメニューアクティブカラー="#92B6D5">
          <van-dropdown-item value="{{ area }}" options="{{ option2 }}" bind:change="changeArea" />
        </ドロップダウンメニュー>
      </ビュー>
    </ヴァンフィールド>
    <van-field label="パスワード" value="{{ password }}" placeholder="パスワードを入力してください" required clearable center type="password" bind:blur="setPassword" />
    <van-field label="パスワードの確認" value="{{ repassword }}" placeholder="パスワードをもう一度入力してください" error="{{ rePwdEqual }}" error-message="{{ errorMsg }}" required clearable center type="password" bind:blur="setRePassword" />
  </バンセルグループ>
  <view class="ログインブロック">
    <text class="text" bind:tap="gotoLogin">今すぐログイン</text>
    <!-- <text class="">パスワードを忘れた場合</text> -->
  </ビュー>
  <van-button class="btn" size="large" type="info" bind:tap="userRegister">登録</van-button>
</ビュー>

スタイルファイルを書き込む: user-register.scss

/* ページ/ユーザーレジスター/ユーザーレジスター.scss */
.レジスタブロック{
  マージン: 200rpx 20rpx 0 20rpx;

  。タイトル{
    テキスト配置: 中央;
    下部マージン: 60rpx;

    。文章{
      フォントサイズ: 60rpx;
      フォントの太さ: 300;
    }
  }

  .ログインブロック{
    テキスト配置: 右;
    マージン: 10rpx 0;

    。文章{
      色: グレー;
      フォントの太さ: 300;
      フォントサイズ: 小さい;
    }
  }
}

携帯電話番号が合法かどうかを判断する

  /**
   * 電話番号を入力してください*/
  setphoneNumber: 関数 (イベント) {
    // console.log('ユーザー名', イベントの詳細値)
    this.setData({
      電話番号: イベントの詳細値
    })
    定数正規表現 = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/
    if (this.data.phoneNumber.length !== 0 && this.data.phoneNumber.length !== 11) {
      this.setData({
        電話の長さ: true、
        phoneError: 「電話番号の長さが正しくありません」
      })
    } そうでない場合 (this.data.phoneNumber.length !== 0 && !regex .test(this.data.phoneNumber)) {
      this.setData({
        電話フォーマット: true、
        phoneError: 「電話番号が間違っています」
      })
    }
  },

完全な js ファイル: user-register.js

// ページ/ユーザーログイン/ユーザーログイン.js

ページ({
  /**
   * ページの初期データ */
  データ: {
    学生番号: '',
    ユーザー名: ''、
    クラス名: ''、
    電話番号: ''、
    私の性別: ''、
    学区: '',
    パスワード: ''、
    パスワードの再設定: ''
    性別: 0,
    オプション1: [
      { テキスト: '性別を選択してください', 値: 0 },
      { テキスト: '男性'、値: 1 },
      { テキスト: '女性'、値: 2 }
    ]、
    エリア: 0,
    オプション2: [
      { テキスト: 'キャンパスを選択してください', 値: 0 },
      { テキスト: 'ノースキャンパス', 値: 1 },
      { テキスト: 'サウスキャンパス'、値: 2 }
    ]、
    // エラーメッセージ rePwdEqual: false,
    電話の長さ: false、
    電話フォーマット: false
  },

  /**
   *学生IDを入力してください*/
  setStudentNumber: 関数 (イベント) {
    // console.log('ユーザー名', イベントの詳細値)
    this.setData({
      学生番号: イベントの詳細値
    })
  },

  /**
   * ユーザー名を入力してください */
  setUsername: 関数 (イベント) {
    // console.log('ユーザー名', イベントの詳細値)
    this.setData({
      ユーザー名: イベントの詳細値
    })
  },

  /**
   * クラスを入力してください */
  setClassName: 関数 (イベント) {
    // console.log('ユーザー名', イベントの詳細値)
    this.setData({
      クラス名: イベントの詳細値
    })
  },

  /**
   * 電話番号を入力してください*/
  setphoneNumber: 関数 (イベント) {
    // console.log('ユーザー名', イベントの詳細値)
    this.setData({
      電話番号: イベントの詳細値
    })
    定数 myReg = /^(((13[0-9{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})) + \d{8})$/
    if (this.data.phoneNumber.length !== 0 && this.data.phoneNumber.length !== 11) {
      this.setData({
        電話の長さ: true、
        phoneError: 「電話番号の長さが正しくありません」
      })
    } そうでない場合 (this.data.phoneNumber.length !== 0 && !myReg.test(this.data.phoneNumber)) {
      this.setData({
        電話フォーマット: true、
        phoneError: 「電話番号が間違っています」
      })
    }
  },

  /**
   * 性別を変更* @param {*} イベント
   */
  changeGender: 関数 (イベント) {
    イベントの詳細が 1 の場合
      this.setData({
        私の性別: '男性'
      })
    } それ以外の場合 (event.detail === 2) {
      this.setData({
        私の性別: '女性'
      })
    } そうでない場合 (event.detail === 0) {
      wx.showToast({
        title: '性別を選択してください'、// プロンプト コンテンツ期間: 2000、// 遅延時間マスク: true // タッチの貫通を防ぐために透明なマスクを表示します})
    }
    console.log('性別の変更', event.detail + this.data.mygender)
  },

  /**
   * キャンパスを変える */
  changeArea: 関数 (イベント) {
    イベントの詳細が 1 の場合
      this.setData({
        校区: 'ノースキャンパス'
      })
    } それ以外の場合 (event.detail === 2) {
      this.setData({
        校区: 'サウスキャンパス'
      })
    } そうでない場合 (event.detail === 0) {
      wx.showToast({
        title: 'キャンパスを選択してください'、// プロンプト コンテンツ期間: 2000、// 遅延時間マスク: true // タッチの浸透を防ぐために透明なマスクを表示します})
    }
    console.log('キャンパスの変更', event.detail + this.data.schoolarea)
  },

  /**
   * パスワードを入力してください */
  setPassword: 関数 (イベント) {
    // console.log('パスワード', イベントの詳細値)
    this.setData({
      パスワード: イベントの詳細値
    })
  },

  /**
   * パスワード再入力 */
  setRePassword: 関数 (イベント) {
    // console.log('repassword', イベントの詳細値)
    this.setData({
      パスワードの再設定: event.detail.value
    })
    if (this.data.password === this.data.repassword && this.data.password.length !== 0) {
      this.setData({
        rePwdEqual: 偽、
        エラーメッセージ: ''
      })
    } そうでない場合 (this.data.password !== this.data.repassword && this.data.password.length !== 0) {
      this.setData({
        rePwdEqual: true、
        errorMsg: '入力した 2 つのパスワードが一致しません'
      })
    }
  },

  /**
   * ログインインターフェースに入る */
  ログインへ移動: 関数 () {
    // 現時点では別のインターフェースにジャンプしたいが、既存のインターフェースは維持したい wx.redirectTo({
      url: '../user-login/user-login'
    })
  },

  /**
   * 登録をリクエスト */
  ユーザー登録: 関数 () {
    // console.log('学生番号', this.data.学生番号)
    // console.log('ユーザー名', this.data.ユーザー名)
    // console.log('className', this.data.className)
    // console.log('電話番号', this.data.電話番号)
    // console.log('mygender', this.data.mygender)
    // console.log('schoolarea', this.data.schoolarea)
    const 存在する学生番号 = this.data.studentNumber.length !== 0
    const 存在するユーザー名 = this.data.userName.length !== 0
    const 存在クラス名 = this.data.className.length !== 0
    const 存在する電話番号 = this.data.phoneNumber.length !== 0
    const 存在する性別 = this.data.mygender.length !== 0
    const 存在領域 = this.data.schoolarea.length !== 0
    // console.log('学生番号', 学生番号が存在する)
    // console.log('ユーザー名', 存在するユーザー名)
    // console.log('className', 存在するクラス名)
    // console.log('電話番号', 存在する電話番号)
    // console.log('mygender', 存在する性別)
    // console.log('学校エリア', 存在するエリア)
    if (existStudentNumber && existingUserName && existingClassName && existingPhoneNumber && existingGender && existingArea && !this.data.rePwdEqual && !this.data.phoneLength && !this.data.phoneFormat) {
      if (this.data.password === this.data.repassword && this.data.password !== '') {
        // ネットワークリクエストを開始する wx.request({
          URL: 'http://api/user/register',
          メソッド: 'post'、
          データ: {
            学生番号: this.data.studentNumber、
            クラス名: this.data.className、
            名前: this.data.userName、
            電話番号: this.data.phoneNumber、
            性別: this.data.mygender,
            エリア: this.data.schoolarea、
            パスワード: this.data.password,
            second_password: this.data.repassword
          },
          ヘッダー: {
            'コンテンツタイプ': 'application/x-www-form-urlencoded'
          },
          成功(res) {
            コンソール.log(res)
            (res.data.code === 200)の場合{
              wx.showToast({
                タイトル: '登録が完了しました! '、
                アイコン: '成功'
              })
              wx.redirectTo({
                url: '/pages/user-login/user-login'
              })
            } それ以外 {
              wx.showToast({
                タイトル: '登録に失敗しました! '、
                アイコン: 'なし'
              })
              console.log('登録に失敗しました!')
              コンソール.log(res)
            }
          },
          失敗(メッセージ) {
            コンソール.log(メッセージ)
          }
        })
      }
    } そうでない場合 (!生徒番号が存在する場合) {
      wx.showToast({
        タイトル: '学生IDは空欄にできません! '、
        アイコン: 'なし'
      })
    } そうでない場合 (!existUserName) {
      wx.showToast({
        タイトル: 'ユーザー名は空にできません! '、
        アイコン: 'なし'
      })
    } そうでない場合 (!existClassName) {
      wx.showToast({
        タイトル: 'クラスは空にできません! '、
        アイコン: 'なし'
      })
    } それ以外の場合 (!電話番号が存在する) {
      wx.showToast({
        タイトル: '携帯電話番号は空欄にできません! '、
        アイコン: 'なし'
      })
    } それ以外の場合 (! 性別が存在する) {
      wx.showToast({
        タイトル: '性別を選択してください! '、
        アイコン: 'なし'
      })
    } それ以外の場合 (!existArea) {
      wx.showToast({
        タイトル: 'キャンパスを選択してください! '、
        アイコン: 'なし'
      })
    } それ以外 {
      wx.showToast({
        タイトル: 指示に従って関連情報を入力してください。 '、
        アイコン: 'なし'
      })
    }
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {

  },

  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {

  },

  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  }
})

要約する

WeChatミニプログラムが携帯電話番号が合法かどうかを判断する方法についてはこれで終わりです。WeChatミニプログラムが携帯電話番号が合法かどうかを判断する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • 携帯電話番号の実装コードを決定するWeChatアプレット

<<:  CentOS 8 に MySql をインストールしてリモート接続を許可する方法

>>:  Linux trコマンドの使用

推薦する

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法

目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

JS クロスドメイン ソリューション React 構成 リバース プロキシ

クロスドメインソリューションjsonp (get をシミュレート) CORS (クロスオリジンリソー...

Linux でショートカットアイコンを設定する方法

序文Linux でショートカットを作成すると、アプリケーションをより速く開くことができます。ここで、...

WeChat アプレットのカスタム スクロール ビューのサンプル コード

ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

mysql mycat ミドルウェアの簡単な紹介

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください

問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...