微信小程序里有很多表单组件，通过使用这些表单组件，完成登录页面、手机快速注册页面和企业用户注册页面。
本次demo中会对view视图容器组件，button按钮组件、image图片组件、input输入框组件、checkbox多项选择组件，switch开关组件、navigator页面链接组件等组件惊吓使用，将这些组件进行界面的布局设计来完成表单登录和注册设计。

form

1.添加一个form项目，在app.json文件中添加 "pages/login/login" ，"pages/mobile/mobile"，"pages/company/company"3个文件目录，并删除默认的文件目录以及相应的文件夹。
2.登录页面
在登录的表单中，输入账号密码进行登录，按钮默认为灰色不可点击，只有在内容输入后，按钮灰色变为绿色并且可点击。在登录的下方提供手机快速注册，企业用户注册，找回密码链接。
(1)完成页面结构，并添加相应的样式，代码如下所示（样式代码省略）：

<view class="content">
  <view class="account">
    <view class="title">账号</view>
    <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
   <view class="account">
    <view class="title">密码</view>
    <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
    <view class="see">
    </view>
  </view>
  <view class="hr"></view>
  <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">登录</button>
  <view class="operate">
     <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
     <view><navigator url="../company/company">企业用户注册</navigator></view>
     <view>找回密码</view>
  </view>
</view>

（2）在login.js文件中添加accountInput、pwBlur事件函数，当账号里输入内容后，登录按钮变为可用状态。代码如下：

Page({
  data: {
    disabled: true,
    btnstate: "default",
    account: "",
    password: ""
  },
  accountInput: function (e) {
    var content = e.detail.value;
    console.log(content);
    if (content != '') {
      this.setData({ disabled: false, btnstate: "primary", account: content });
    } else {
      this.setData({ disabled: true, btnstate: "default" });
    }
  },
  pwdBlur: function (e) {
    var password = e.detail.value;
    if (password != '') {
      this.setData({ password: password });
    }
  }
  
})

3.手机号注册页面
（1）在手机号注册中，需要用input框用来输入手机号码，勾选同一注册协议以及下一步按钮。在mobile.wxml中完成页面结构，并且完成对应样式（样式代码省略）。

<view class="content">
   <view class="hr"></view>
   <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur"/></view>
   </view>
   <view>
     <view class="xieyi">
        <icon type="success" color="red" size="18"></icon>
        <text class="agree">同意</text>
        <text class="opinion">京东用户注册协议</text>
     </view>
   </view>
   <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button>
</view>

（2）在mobile.js文件中添加mobileblur时间，如果输入手机号，下一步代码变为可用状态。

Page({
  data: {
    disabled: true,
    btnstate: "default",
    mobile: ""
  },
  mobileblur: function (e) {
    var content = e.detail.value;
    if (content != "") {
      this.setData({ disabled: false, btnstate: "primary", mobile: content });
    } else {
      this.setData({ disabled: true, btnstate: "defalut", mobile: "" });
    }
  }
})

（3）在mobile.json文件中，添加"navigationBarTitleText"属性，设置导航标题为手机快速注册
4.企业用户注册页面
在企业用户注册页面中，有6个表单想，分别是用户名，密码，企业全称、联系人姓名、手机号和短信验证吗。还有一个注册按钮和同一注册协议。
（1）在company.wxml中完成页面结构并添加相应的样式（样式代码省略）。

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="content">
  <view class="hr"></view>
  <view class="item">
     <input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bindblur="accountblur"/>
  </view>
  <view class="item flex">
     <input type="text" password name="password"  placeholder="请设置6-20位登录密码" placeholder-class="holder"/>
     <switch type="switch" name="switch"/>
  </view>
  <view class="item">
     <input type="text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder" />
  </view>
  <view class="item">
     <input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder" />
  </view>
  <view class="mobileInfo">
    <view class="mobile">
      <input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder" />
    </view>
     <view class="code">发送验证码</view>
  </view>
  <view class="item">
     <input type="text" name="code" placeholder="短信验证码" placeholder-class="holder" />
  </view>
  <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button>
  <view class="xieyi">
     <text class="agree">注册即视为同意</text><text class="opinion">《企业用户注册协议》</text>
  </view>
</view>
</form>

（2）当输入用户名后，按钮注册变为可用状态，同时将表当内容提交到company.js文件后台中，保存在缓存中。

Page({
  data: {
    disabled: true,
    btnstate: "default"
  },
  accountblur: function (e) {
    var content = e.detail.value;
    if (content != "") {
      this.setData({ disabled: false, btnstate: "primary" });
    } else {
      this.setData({ disabled: true, btnstate: "default" });
    }
  },
  formSubmit: function (e) {
    console.log(e);
    var user = new Object();
    user.account = e.detail.value.loginName;
    user.password = e.detail.value.password;
    user.company = e.detail.value.company;
    user.userName = e.detail.value.userName;
    user.code = e.detail.value.code;
    user.mobile = e.detail.value.mobile;
    user.switch = e.detail.value.switch;
    wx.setStorageSync('user', user);
    wx.showToast({
      title: "注册成功",
      icon: "success",
      duration: 1000,
      success: function () {
        wx.navigateTo({
          url: '../login/login'
        })
      }
    });
  }
})

（3）在company.json文件中，添加"navigationBarTitleText"属性，设置导航标题为企业用户注册。
小结：
这次主要掌握了表单组件的使用，利用表单组件来设计微信小程序的表单内容，可以提交表单以及重置表单的内容。