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

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

上一篇文章我们完成了已有账号去登录的基础页面，还没有绑定一些功能也没有写一些逻辑代码，下面我们会用正则完成这个页面的逻辑代码，判断用户填写的数据是否合格。

1. 首先我们已经在上一篇文章中的input内通过v-model绑定了一些数据，然后我们再在data中拿到这些数据，定义一个rule规则添加正则判断，部分userName以及userPwd的部分判断代码如下所示：

 rules:{
         userName:{
           rule:/\S/,
           msg:"账号不能为空"
         },
         userPwd:{
           rule:/^[0-9a-zA-Z]{6,16}$/,
           msg:"密码应为6-16位字符"
         }
       }

2. 然后那个顶部的插好也要绑定一个返回上一级页面的函数goBack, goBack() { uni.navigateBack({delta: 1 }) },

   delta写为1即可，只跳转到上一次的页面。

3. 然后点击登录这个按钮我们设置了一个setTimeout延时器，具体的作用就是点击登录后，展示loading转圈两秒后完成登录，并且判断userName以及userPwd是否合格,不合格就return出去，合格就显示title登录中。下面是延时器的代码，我设置为等待两秒钟：

setTimeout(()=>{
          uni.hideLoading();
          uni.navigateBack({
            delta:1
          })
        },2000)
      },

4. 接下来是判断用户名是否符合要求的逻辑代码，validata是之前获取到的用户输入的用户名数据，我们需要对他进行判断，符合要求我们就显示登陆中的消息提示以及icon图标，否则就return false,这个validate还要传递一个key参数进来，具体的逻辑代码如下图所示：

完成之后我们这个登录页面就做好了，但没有后端搭配，不是一个完整的登陆注册页面。