基本功能

1、头像选择、用户名、密码、昵称选择、性别、城市

2、确认注册跳转 我的页面。

3、其他注册方式跳转用户名 密码登录方式

4、清除 和 密码显示按钮：

5、用户名、密码合法性校验：

6、点击微信图标，调转回微信登录：

代码分析：

1、密码显示和不显示控制

参考：小程序密码显示与隐藏的实现_小程序password icon-CSDN博客

 通过变量来控制图标和输入文本框的样式：type

  <view class="section section_password">
      <view class="password-icon"></view>
      <input type="{{password_input_type}}" value="{{password}}" name="password" placeholder="请输入密码" bindinput="changePwd" />
      <image class="see-password-icon" src="../../../image/zhenyan.png" bindtap="seePassword" wx:if="{{!show_pass}}"/>
      <image class="see-password-icon" src="../../../image/biyan.png" bindtap="seePassword" wx:else/>
    </view>

2、用户名密码校验：

判断是电话还是邮箱

//判断用户填写的是username还是email
function judgeTelOrName(str){
  var phoneRegExp = new RegExp('^1[3|4|5|8][0-9]\d{4,8}$', 'g');
  var usernameRegExp = new RegExp('^(?![^a-zA-Z_]+$)(?!\D+$).{6,18}$', 'g');
  if(usernameRegExp.test(str)){
    return 'using_name';
  }else if(phoneRegExp.test(str)){
    return 'using_email';
  }else{
    return 'error';
  }
}

密码合法性检测：

// 密码合法性检测
    var pwdRegExp = new RegExp('^(?![^a-zA-Z_]+$)(?!\D+$).{6,18}$', 'g');
    if(!pwdRegExp.test(password)){
      wx.showToast({
        title: '密码设置不合理',
        duration: 3000,
        icon: "none"
      })
    }

3、使用form代替普通的<input>

input需要通过 bindinput="" 来获取输入的值，通过form可以一次性拿到所有值，只在提交的时候进行处理：

<form class="login-form" bindsubmit="doLogin" bindreset="formReset">
    <view class="section section_username">
      <view class="username-icon"></view>
      <input type="text" name="umt" value="{{umt}}" placeholder="用户名/邮箱" bindinput="changeUmt" />
      <icon class='clear' type="clear" bindtap="clearUmt" />
    </view>
    <view class="section section_password">
      <view class="password-icon"></view>
      <input type="{{password_input_type}}" value="{{password}}" name="password" placeholder="请输入密码" bindinput="changePwd" />
      <image class="see-password-icon" src="../../../image/zhenyan.png" bindtap="seePassword" wx:if="{{!show_pass}}"/>
      <image class="see-password-icon" src="../../../image/biyan.png" bindtap="seePassword" wx:else/>
    </view>
    <view class="section btn-area">
      <button class="submit" formType="submit">登录</button>
    </view>
    <view class="quick-link">
      <text class="left">快速注册</text>
      <text class="right">忘记密码?</text>
    </view>
  </form>

formType="submit" 就是提交动作，触发form上绑定的 bindsubmit="doLogin" 函数

完整代码下载：

https://download.csdn.net/download/u200814342A/88795758

 个人小程序创业项目   #小程序://朋友圈子/VMEWRjrOTum4Soa  有想法的朋友可以一起交流下~