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

最新推荐文章于 2024-04-19 11:49:28 发布

原创

最新推荐文章于 2024-04-19 11:49:28 发布 · 4.2k 阅读

标签

#小程序 #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

最低0.47元/天解锁文章