微信小程序里有很多表單組件，通過使用這些表單組件，完成登錄頁面、手機快速注冊頁面和企業(yè)用戶注冊頁面。
本次demo中會對view視圖容器組件，button按鈕組件、image圖片組件、input輸入框組件、checkbox多項選擇組件，switch開關(guān)組件、navigator頁面鏈接組件等組件驚嚇使用，將這些組件進行界面的布局設(shè)計來完成表單登錄和注冊設(shè)計。

form

1.添加一個form項目，在app.json文件中添加 "pages/login/login" ，"pages/mobile/mobile"，"pages/company/company"3個文件目錄，并刪除默認的文件目錄以及相應(yīng)的文件夾。
2.登錄頁面
在登錄的表單中，輸入賬號密碼進行登錄，按鈕默認為灰色不可點擊，只有在內(nèi)容輸入后，按鈕灰色變?yōu)榫G色并且可點擊。在登錄的下方提供手機快速注冊，企業(yè)用戶注冊，找回密碼鏈接。
(1)完成頁面結(jié)構(gòu)，并添加相應(yīng)的樣式，代碼如下所示（樣式代碼省略）：

<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">企業(yè)用戶注冊</navigator></view>
     <view>找回密碼</view>
  </view>
</view>

（2）在login.js文件中添加accountInput、pwBlur事件函數(shù)，當(dāng)賬號里輸入內(nèi)容后，登錄按鈕變?yōu)榭捎脿顟B(tài)。代碼如下：

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框用來輸入手機號碼，勾選同一注冊協(xié)議以及下一步按鈕。在mobile.wxml中完成頁面結(jié)構(gòu)，并且完成對應(yīng)樣式（樣式代碼省略）。

<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">京東用戶注冊協(xié)議</text>
     </view>
   </view>
   <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button>
</view>

（2）在mobile.js文件中添加mobileblur時間，如果輸入手機號，下一步代碼變?yōu)榭捎脿顟B(tài)。

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"屬性，設(shè)置導(dǎo)航標(biāo)題為手機快速注冊
4.企業(yè)用戶注冊頁面
在企業(yè)用戶注冊頁面中，有6個表單想，分別是用戶名，密碼，企業(yè)全稱、聯(lián)系人姓名、手機號和短信驗證嗎。還有一個注冊按鈕和同一注冊協(xié)議。
（1）在company.wxml中完成頁面結(jié)構(gòu)并添加相應(yīng)的樣式（樣式代碼省略）。

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="content">
  <view class="hr"></view>
  <view class="item">
     <input type="text" name="loginName" placeholder="請設(shè)置4-20位用戶名" placeholder-class="holder" bindblur="accountblur"/>
  </view>
  <view class="item flex">
     <input type="text" password name="password"  placeholder="請設(shè)置6-20位登錄密碼" placeholder-class="holder"/>
     <switch type="switch" name="switch"/>
  </view>
  <view class="item">
     <input type="text" name="company" placeholder="請?zhí)顚懝ど叹肿悦Q" placeholder-class="holder" />
  </view>
  <view class="item">
     <input type="text" name="userName" placeholder="聯(lián)系人姓名" placeholder-class="holder" />
  </view>
  <view class="mobileInfo">
    <view class="mobile">
      <input type="text" name="mobile" placeholder="請輸入手機號" placeholder-class="holder" />
    </view>
     <view class="code">發(fā)送驗證碼</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">《企業(yè)用戶注冊協(xié)議》</text>
  </view>
</view>
</form>

（2）當(dāng)輸入用戶名后，按鈕注冊變?yōu)榭捎脿顟B(tài)，同時將表當(dāng)內(nèi)容提交到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"屬性，設(shè)置導(dǎo)航標(biāo)題為企業(yè)用戶注冊。
小結(jié)：
這次主要掌握了表單組件的使用，利用表單組件來設(shè)計微信小程序的表單內(nèi)容，可以提交表單以及重置表單的內(nèi)容。