微信小程序–注册登录效果(注册)

页面效果:


页面布局代码:

<view class="content">
    <view class = "logo">
        <image mode="aspectFit" src="/images/logo.png"></image>
    </view>
    <form bindsubmit="formSubmit">
        <view class="input-area">
          <input id="username" name="username" maxlength='11' type="text" placeholder="手机号" bindchange="getPhoneNum"/>
          <view class="smsCode">
            <input id="smsCode" name="smsCode" maxlength='6' type="text" placeholder="验证码" />
            <button bindtap = "getSmsCode" disabled="{{smsCodeDisabled}}" style="background-color:{{getSmsCodeBtnColor}}"   class="getSmsCodeBtn">{{getSmsCodeBtnTxt}}</button>
          </view>
          <input id="password" name="password" maxlength='20' type="password" placeholder="密码" />
        </view>
        <view class="btn-area">
            <button  disabled="{{registDisabled}}" style="background-color:{{registBtnBgBgColor}}"   formType="submit"  loading="{{btnLoading}}"> {{registBtnTxt}} </button>
            <view class="txt-area">
                 <navigator redirect url="../findpassword/index"><text class="forgot-password">忘记密码?</text></navigator>
                 <navigator redirect url="../login/index"><text class="register">登录账号</text></navigator>
            </view>
        </view>
    </form>

    <!--<progress class="myprogress" percent="{{percent }}" color="{{color}}" active/>-->
    
</view>

主要代码片段:

setregistData1:function(){
    this.setData({
      registBtnTxt:"注册中",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#999",
      btnLoading:!this.data.btnLoading
    });
  },

点击注册时,动态设置data属性值,改变注册按钮文本,背景色,显示loading动画,设置不可点击

setregistData2:function(){
    this.setData({
      registBtnTxt:"注册",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#ff9900",
      btnLoading:!this.data.btnLoading
    });
  },

注册成功后,重置注册按钮效果

checkUserName:function(param){ 
    var phone = util.regexConfig().phone;
    var inputUserName = param.trim();
    if(phone.test(inputUserName)){
      return true;
    }else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的手机号码'
      });
      return false;
    }
  },
  checkPassword:function(param){
    var userName = param.username.trim();
    var password = param.password.trim();
    if(password.length<=0){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请设置密码'
      });
      return false;
    }else if(password.length<6||password.length>20){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '密码长度为6-20位字符'
      });
      return false;
    }else{
      return true;
    }
  },

检验输入的手机号码及密码格式是否正确

getSmsCode:function(){
    var phoneNum = this.data.phoneNum;
    var that = this;
    var count = 60;
    if(this.checkUserName(phoneNum)){
      var si = setInterval(function(){
      if(count > 0){
        count--;
        that.setData({
          getSmsCodeBtnTxt:count+' s',
          getSmsCodeBtnColor:"#999",
          smsCodeDisabled: true
        });
      }else{
        that.setData({
          getSmsCodeBtnTxt:"获取验证码",
          getSmsCodeBtnColor:"#ff9900",
          smsCodeDisabled: false
        });
          count = 60;
          clearInterval(si);
        }
      },1000);
    }
    
  },

倒计时获取手机短信验证码效果,注意在setInterval()中要重新定义this指向,使用var that = this,代替指向当前页面的page对象;


checkSmsCode:function(param){
    var smsCode = param.smsCode.trim();
    var tempSmsCode = '000000';//演示效果临时变量,正式开发需要通过wx.request获取
    if(smsCode!=tempSmsCode){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的短信验证码'
      });
      return false;
    }else{
      return true;
    }
  },

校验手机短信验证码是否正确,这里正式开发同样需要调取后台验证接口,这里只是写死在代码中作为效果演示;

getPhoneNum:function(e){
   var value  = e.detail.value;
   this.setData({
    phoneNum: value     
   });
  },
<input id="username" name="username" maxlength='11' type="text" placeholder="手机号" bindchange="getPhoneNum"/>

细节:因为小程序不能操作dom元素,所以是无法在点击获取验证码按钮后通过document.getElementById(username).value获取手机号码;所以这里需要对手机号码加一个绑定事件bindchange,当输入框内容发生改变时将用户输入内容存放到全局data–>phoneNum里面;

formSubmit:function(e){
    var param = e.detail.value;
    this.mysubmit(param);
 },
 mysubmit:function (param){
    var flag = this.checkUserName(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param)
    var that = this;
    if(flag){
        this.setregistData1();
        setTimeout(function(){
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1500
          });
          that.setregistData2();
          that.redirectTo(param);
        },2000);
    } 
  },

最后就是将用户的输入内容提交

GitHub代码地址:https://github.com/demi520/wxapp-login-regist