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

{
  "コンポーネントの使用": {
  	"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"
  }
}

<!-- 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>
</ビュー>

/* ページ/ユーザーレジスター/ユーザーレジスター.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

ページ（{
  /**
   * ページの初期データ */
  データ： {
    学生番号: '',
    ユーザー名: ''、
    クラス名: ''、
    電話番号: ''、
    私の性別： ''、
    学区: '',
    パスワード: ''、
    パスワードの再設定: ''
    性別: 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: 関数 () {

  }
})