uni-app开发初体验2（day2）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

登录页面的基础样式完成了之后，这次我们要完成登录的里面的内容

1. 首先，是这个手机号注册的详细内容。

• 我们先创建一个页面，命名根据自己需求来，然后再这里面有一个输入框，输入手机号的，但是有个正则，用来验证手机号是否为真，为真即进入验证码页面，否则则无法进入，具体的页面如下：

2. 主题页面是一个view容器用来提示写手机号，一个input输入框，用来给用户填写手机号，一个view容器，点击后跳转到验证码页面。具体的代码如下所示：

  <text class="user-text">手机号</text>
 <input type="number" focus="true" v-model="userTel"  placeholder="请输入11位手机号" ></input>
              </view>
            </view>
            <view class="tel" @tap="goNextCode">下一步</view>
          
          </view>

3. 然后就是我们的script部分，这里用来写正则，判断手机号的真伪。在data中return一个rule,规则则rule:/^1[23456789]\d{9}$/,然后定义一个空数据，userTel，用来获取用户输入的手机号，以便于后续判断是否合格。

4.然后methods中，判断是否符合规则，符合的话就定义一个事件，gonextcode，通过uni.navigateTo跳转到验证码输入页面，否则就通过uni.showToast弹框提示用户请输入11位数字的手机号。这是用户输入的手机号不符合的逻辑代码：

if(!this.rules[key].rule.test(this[key])){
          uni.showToast({
            title:this.rules[key].msg,
            icon:"none"
          })
          bool=false;
          return false;
        }
        return bool;

这是用户输入手机号符合的逻辑代码：

`` goNextCode(){ if(!this.validate('userTel')) return; uni.navigateTo({ url:'../login-code/login-code' }) }

5. 在这些代码之前我们要创建号验证码获取的页面，然后符合之后可以直接跳转到那个页面。