微信小程序?qū)崿F(xiàn)登錄注冊及其驗(yàn)證

因?yàn)橐恍┰蛩豸铮揖烷_始學(xué)習(xí)了小程序仲闽，這次做了一個登錄一個注冊頁面棋傍，源碼地址：https://gaoyixiang1.github.io/Lunch/

大概功能：

登錄

在賬戶和密碼都沒有輸入的情況下倔毙，頁面不會跳轉(zhuǎn)冻璃。
當(dāng)?shù)卿洺晒托畔⑤斎氩蝗珪r都會有相應(yīng)的提示
可以跳轉(zhuǎn)至注冊頁面

注冊

在全部信息都沒有輸入的情況下侮穿，不會跳轉(zhuǎn)頁面
在信息輸入完全的情況下顯示注冊成功
用戶返回到登錄頁面

效果圖

登錄.png

注冊.png

登錄代碼

wxml

<view class="container">
  <view class="login-from">
 
    <!--賬號-->
    <view class="inputView">
      <image class="nameImage" src="../img/name.png"></image>
      <label class="loginLab">賬號</label>
      <input class="inputText" placeholder="請輸入賬號" bindinput="phoneInput" type='text' />
    </view>
    <view class="line"></view>
 
    <!--密碼-->
    <view class="inputView">
      <image class="keyImage" src="../img/key.png"></image>
      <label class="loginLab">密碼</label>
      <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" type='password'/>
    </view>
 
    <!--按鈕-->
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登錄</button>
    </view>
    <view class='goto'><navigator url='../region/region'>還未注冊歌径？去注冊</navigator> </view>
  </view>
</view>

驗(yàn)證部分

  region: function () {
    if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) {
      wx.showToast({
        title: '請輸入信息',
        icon: 'loading',
        duration: 2000
      })
    }else if(this.data.repwd!=this.data.password){
      wx.showToast({
        title: '密碼有誤',
        icon: 'loading',
        duration: 2000
      })
    }
     else {
      wx.showToast({
        title: '注冊成功',
        icon: 'success',
        duration: 2000
      })
    }
  }
})

注冊

wxml

<!--pages/region/region.wxml-->
<view class='title-container'>歡迎注冊啊</view>
<view class='information'>
   <view class='username'>
     <input placeholder='請輸入用戶名' type='text' bindinput='username' placeholder-class='style'/>
   </view>
    <view class='password'>
     <input placeholder='請輸入密碼' type='password' bindinput='password' placeholder-class='style'/>
    </view>
     <view class='repwd'>
       <input placeholder='請?jiān)俅屋斎朊艽a'    type='password' bindinput='repwd' placeholder-class='style'/>
      </view>
      <view class='phonenum'>
         <input placeholder='請輸入手機(jī)號碼' type='text' bindinput='phonenum' placeholder-class='style'/>
      </view>
  </view>
        <view>
       <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap='region'>注冊</button>
        </view>

驗(yàn)證部分

  region: function () {
    if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) {
      wx.showToast({
        title: '請輸入信息',
        icon: 'loading',
        duration: 2000
      })
    }else if(this.data.repwd!=this.data.password){
      wx.showToast({
        title: '密碼有誤',
        icon: 'loading',
        duration: 2000
      })
    }
     else {
      wx.showToast({
        title: '注冊成功',
        icon: 'success',
        duration: 2000
      })
    }
  }
})

最后編輯于：2019.08.01 12:20:21

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者