微信小程序里有很多表单组件，通过使用这些表单组件，完成登录页面、手机快速注册页面和企业用户注册页面。
本次demo中会对view视图容器组件，button按钮组件、image图片组件、input输入框组件、checkbox多项选择组件，switch开关组件、navigator页面链接组件等组件惊吓使用，将这些组件进行界面的布局设计来完成表单登录和注册设计。
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"属性，设置导航标题为企业用户注册。
小结：
这次主要掌握了表单组件的使用，利用表单组件来设计微信小程序的表单内容，可以提交表单以及重置表单的内容。
