【微信小程序】判断手机号是否合法

news/2024/7/20 1:02:55 标签: 小程序, javascript

场景

在注册页面输入手机号，在请求注册接口前先行判别输入的手机号码是否合法；

效果

注册界面样式
手机号判别是否合法
手机号判别是否合法

代码

导入 vant-weapp 组件：user-register.json

{
  "usingComponents": {
  	"van-cell-group": "@vant/weapp/cell-group/index",
  	"van-field": "@vant/weapp/field/index",
  	"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
  	"van-dropdown-item": "@vant/weapp/dropdown-item/index",
  	"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>
  </view>
  <van-cell-group class="input">
    <van-field label="学号" value="{{ studentNumber }}" placeholder="请输入学号" required clearable center bind:blur="setStudentNumber" />
    <van-field label="用户名" value="{{ userName }}" placeholder="请输入用户名" required clearable center bind:blur="setUsername" />
    <van-field label="班级" value="{{ className }}" placeholder="请输入所在班级" required clearable center bind:blur="setClassName" />
    <van-field label="手机号" value="{{ phoneNumber }}" placeholder="请输入手机号" error="{{ phoneLength || phoneFormat }}" error-message="{{ phoneError }}" required clearable center bind:blur="setphoneNumber" />
    <van-field label="性别" required use-input-slot>
      <view style="position: absolute; left: -16rpx;" slot="input">
        <van-dropdown-menu active-color="#92B6D5">
          <van-dropdown-item value="{{ gender }}" options="{{ option1 }}" bind:change="changeGender" />
        </van-dropdown-menu>
      </view>
    </van-field>
    <van-field label="校区" required use-input-slot>
      <view style="position: absolute; left: -16rpx;" slot="input">
        <van-dropdown-menu active-color="#92B6D5">
          <van-dropdown-item value="{{ area }}" options="{{ option2 }}" bind:change="changeArea" />
        </van-dropdown-menu>
      </view>
    </van-field>
    <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" />
  </van-cell-group>
  <view class="login-block">
    <text class="text" bind:tap="gotoLogin">立即登录</text>
    <!-- <text class="">忘记密码</text> -->
  </view>
  <van-button class="btn" size="large" type="info" bind:tap="userRegister">注册</van-button>
</view>

编写样式文件：user-register.scss

/* pages/user-register/user-register.scss */
.register-block{
  margin: 200rpx 20rpx 0 20rpx;

  .title{
    text-align: center;
    margin-bottom: 60rpx;

    .text{
      font-size: 60rpx;
      font-weight: 300;
    }
  }

  .login-block{
    text-align: right;
    margin: 10rpx 0;

    .text{
      color: gray;
      font-weight: 300;
      font-size: smaller;
    }
  }
}

判断手机号是否合法

javascript">  /**
   * 输入手机号
   */
  setphoneNumber: function (event) {
    // console.log('username', event.detail.value)
    this.setData({
      phoneNumber: event.detail.value
    })
    const regex = /^(((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({
        phoneLength: true,
        phoneError: '手机长度有误'
      })
    } else if (this.data.phoneNumber.length !== 0 && !regex .test(this.data.phoneNumber)) {
      this.setData({
        phoneFormat: true,
        phoneError: '手机号有误'
      })
    }
  },

完整js文件：user-register.js

javascript">// pages/user-login/user-login.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    studentNumber: '',
    userName: '',
    className: '',
    phoneNumber: '',
    mygender: '',
    schoolarea: '',
    password: '',
    repassword: '',
    gender: 0,
    option1: [
      { text: '请选择性别', value: 0 },
      { text: '男', value: 1 },
      { text: '女', value: 2 }
    ],
    area: 0,
    option2: [
      { text: '请选择所在校区', value: 0 },
      { text: '北校区', value: 1 },
      { text: '南校区', value: 2 }
    ],
    // 错误提示
    rePwdEqual: false,
    phoneLength: false,
    phoneFormat: false
  },

  /**
   * 输入学号
   */
  setStudentNumber: function (event) {
    // console.log('username', event.detail.value)
    this.setData({
      studentNumber: event.detail.value
    })
  },

  /**
   * 输入用户名
   */
  setUsername: function (event) {
    // console.log('username', event.detail.value)
    this.setData({
      userName: event.detail.value
    })
  },

  /**
   * 输入所在班级
   */
  setClassName: function (event) {
    // console.log('username', event.detail.value)
    this.setData({
      className: event.detail.value
    })
  },

  /**
   * 输入手机号
   */
  setphoneNumber: function (event) {
    // console.log('username', event.detail.value)
    this.setData({
      phoneNumber: event.detail.value
    })
    const 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({
        phoneLength: true,
        phoneError: '手机长度有误'
      })
    } else if (this.data.phoneNumber.length !== 0 && !myReg.test(this.data.phoneNumber)) {
      this.setData({
        phoneFormat: true,
        phoneError: '手机号有误'
      })
    }
  },

  /**
   * 修改性别
   * @param {*} event
   */
  changeGender: function (event) {
    if (event.detail === 1) {
      this.setData({
        mygender: '男'
      })
    } else if (event.detail === 2) {
      this.setData({
        mygender: '女'
      })
    } else if (event.detail === 0) {
      wx.showToast({
        title: '请选择性别', // 提示的内容
        duration: 2000, // 延迟时间
        mask: true // 显示透明蒙层，防止触摸穿透
      })
    }
    console.log('改性别', event.detail + this.data.mygender)
  },

  /**
   * 修改所在校区
   */
  changeArea: function (event) {
    if (event.detail === 1) {
      this.setData({
        schoolarea: '北校区'
      })
    } else if (event.detail === 2) {
      this.setData({
        schoolarea: '南校区'
      })
    } else if (event.detail === 0) {
      wx.showToast({
        title: '请选择所在校区', // 提示的内容
        duration: 2000, // 延迟时间
        mask: true // 显示透明蒙层，防止触摸穿透
      })
    }
    console.log('改校区', event.detail + this.data.schoolarea)
  },

  /**
   * 输入密码
   */
  setPassword: function (event) {
    // console.log('password', event.detail.value)
    this.setData({
      password: event.detail.value
    })
  },

  /**
   * 再次输入密码
   */
  setRePassword: function (event) {
    // console.log('repassword', event.detail.value)
    this.setData({
      repassword: event.detail.value
    })
    if (this.data.password === this.data.repassword && this.data.password.length !== 0) {
      this.setData({
        rePwdEqual: false,
        errorMsg: ''
      })
    } else if (this.data.password !== this.data.repassword && this.data.password.length !== 0) {
      this.setData({
        rePwdEqual: true,
        errorMsg: '两次输入的密码不一致'
      })
    }
  },

  /**
   * 进入登录界面
   */
  gotoLogin: function () {
    // 当前要跳转到另一个界面，但是会保留现有界面
    wx.redirectTo({
      url: '../user-login/user-login'
    })
  },

  /**
   * 请求注册
   */
  userRegister: function () {
    // console.log('studentNumber', this.data.studentNumber)
    // console.log('userName', this.data.userName)
    // console.log('className', this.data.className)
    // console.log('phoneNumber', this.data.phoneNumber)
    // console.log('mygender', this.data.mygender)
    // console.log('schoolarea', this.data.schoolarea)
    const existStudentNumber = this.data.studentNumber.length !== 0
    const existUserName = this.data.userName.length !== 0
    const existClassName = this.data.className.length !== 0
    const existPhoneNumber = this.data.phoneNumber.length !== 0
    const existGender = this.data.mygender.length !== 0
    const existArea = this.data.schoolarea.length !== 0
    // console.log('studentNumber', existStudentNumber)
    // console.log('userName', existUserName)
    // console.log('className', existClassName)
    // console.log('phoneNumber', existPhoneNumber)
    // console.log('mygender', existGender)
    // console.log('schoolarea', existArea)
    if (existStudentNumber && existUserName && existClassName && existPhoneNumber && existGender && existArea && !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',
          method: 'post',
          data: {
            student_number: this.data.studentNumber,
            class_name: this.data.className,
            name: this.data.userName,
            phone_number: this.data.phoneNumber,
            gender: this.data.mygender,
            area: this.data.schoolarea,
            password: this.data.password,
            second_password: this.data.repassword
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success(res) {
            console.log(res)
            if (res.data.code === 200) {
              wx.showToast({
                title: '注册成功！',
                icon: 'success'
              })
              wx.redirectTo({
                url: '/pages/user-login/user-login'
              })
            } else {
              wx.showToast({
                title: '注册失败！',
                icon: 'none'
              })
              console.log('注册失败！')
              console.log(res)
            }
          },
          fail(msg) {
            console.log(msg)
          }
        })
      }
    } else if (!existStudentNumber) {
      wx.showToast({
        title: '学号不能为空！',
        icon: 'none'
      })
    } else if (!existUserName) {
      wx.showToast({
        title: '用户名不能为空！',
        icon: 'none'
      })
    } else if (!existClassName) {
      wx.showToast({
        title: '班级不能为空！',
        icon: 'none'
      })
    } else if (!existPhoneNumber) {
      wx.showToast({
        title: '手机号不能为空！',
        icon: 'none'
      })
    } else if (!existGender) {
      wx.showToast({
        title: '请选择性别！',
        icon: 'none'
      })
    } else if (!existArea) {
      wx.showToast({
        title: '请选择所在校区！',
        icon: 'none'
      })
    } else {
      wx.showToast({
        title: '请按提示输入相关信息！',
        icon: 'none'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

http://www.niftyadmin.cn/n/1770056.html

相关文章

python 显示内置函数_python内置函数

python 显示内置函数_python内置函数

常用&#xff1a;#abs(),all(),any(),bin(),bool(),chr(),dict(),dir(),divmod(),enumerate(),eval(),filter(),float(),#help(),hex(),id(),input(),int(),len(),list(),map(),max(),min(),oct(),open(),ord(),print(),#range(),reversed(),round(),set(),sorted(),str(),sum(…
阅读更多...
【微信小程序】获取手机号

【微信小程序】获取手机号

场景 在小程序开发中&#xff0c;获取用户信息、获取手机号是最常用到的功能。 官方文档说明如下&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 效果 代码 demo.json&#xff1a;初始化json文件 {"usi…
阅读更多...
window固定一个进程显示在另外一个屏幕_什么是window对象1

window固定一个进程显示在另外一个屏幕_什么是window对象1

一、BOM的概念1.1 什么是BOM?BOM&#xff1a;Browser Object Model 是浏览器对象模型&#xff0c;BOM由多个对象构成&#xff0c;其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象&#xff0c;其他对象都是该对象的子对象。1.2 BOM包含哪些内容&#xff1f;1.2.1 浏…
阅读更多...
【微信小程序】微信支付

【微信小程序】微信支付

简介 微信的支付方式有以下几种&#xff0c;不同的支付方式适用于不同的支付场景&#xff0c;而本文讲的就是 小程序支付 方式&#xff1a; 说到支付功能就要涉及到金钱交易&#xff0c;必定是有比较严格的规范及流程&#xff0c;如要求小程序必须具备企业性质&#xff0c;必…
阅读更多...
sa密码修改记录_在Linux下生成crypt加密密码

sa密码修改记录_在Linux下生成crypt加密密码

当我们用红帽Kickstart脚本或useradd或其他方式写东西的时候&#xff0c;经常会需要用到crypt命令加密生成的密码格式。那么&#xff0c;有没有其他方式可以生成这种格式的密码&#xff1f;事实上&#xff0c;方法有很多1、我们可以用mkpasswd命令&#xff1a;这个命令就是用来…
阅读更多...
【微信小程序】下拉刷新与上拉加载

【微信小程序】下拉刷新与上拉加载

效果 方法 在 <scroll-view> 里设定 bindscrolltoupper 和 bindscrolltolower 实现监听微信小程序下拉和下滑&#xff1b; onPullDownRefresh 和 onReachBottom 方法实现小程序下拉加载和上拉刷新&#xff1b; 代码 方法一 index.wxml <!-- 顶部 关注 | 广场 标签…
阅读更多...
python作者 es6_ES6模块化

python作者 es6_ES6模块化

模块化:js不支持模块化ruby requirepython import在ES6之前&#xff0c;社区制定一套模块规范:Commonjs 主要服务端 nodeJs require(http)AMD requireJs, curlJsCMD seaJsES6出来&#xff0c;同意服务端和客户端模块规范:import {xx} dddMath.pow()Math.abs()import {pow, abs}…
阅读更多...
Win10 安装 SQL Server 2008 与使用指南

Win10 安装 SQL Server 2008 与使用指南

背景 某喵学校学的是SQL Server 2008 R2&#xff0c;我学的是MySQL 2018&#xff0c;他找我 debug 的时候可能多少有点差别&#xff0c;就下了一个方便实操试试&#xff1b; 昨天他正常建表&#xff0c;设了联合主键之后正常插入数据报错如下&#xff1a;"违反了 PRIMAR…
阅读更多...
最新文章

Copyright @ 2022~2023