258资源分享网

上一章介绍了 微信小程序入门六本地缓存和搜索 ，这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，form表单的取值，get / post 请求 ，反馈交互提示框，页面跳转 ...

这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，form表单的取值，get / post 请求 ，反馈交互提示框，页面跳转 以及 页面UI。

效果图：

注册页面：基本内容有账号，密码，确认密码，也可以添加 是否同意条款 

wxml源码：

1. 顶部提示错误信息

2. 输入内容长度限制

3. 点击注册进行表单验证

4. 存在问题：输入框focus 无效果

[html] view plain copy

<!--  

变量说明：  

showTopTips ： 是否显示提示信息  

errorMsg ： 错误信息  

windowHeight ：设备的窗口的高度  

windowWidth ： 设备的窗口的宽度  

account ： 账号  

password ：密码  

subPassword ：确认密码  

-->  

<view class="page__bd">  

  <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>  

  <view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" class="back_img">  

  </view>  

  <view style="position:absolute;top:{{windowHeight * 0.06}}px;">  

    <image src="../../images/meBack.jpg" style="width: {{windowWidth * 0.4}}px;height:{{windowWidth * 0.4}}px; margin-left:{{windowWidth * 0.5 - 80}}px;border-radius:{{windowWidth * 0.2}}px;"></image>  

  </view>  

  <form bindsubmit="formSubmit" bindreset="formReset">  

    <view class="login_info" style="top:{{windowHeight * 0.35}}px;width: {{windowWidth * 0.92}}px;">  

      <view class="weui-cells weui-cells_after-title login_form">  

        <view class="weui-cell weui-cell_input">  

          <view class="weui-cell__hd">