基本功能

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  有想法的朋友可以一起交流下~