效果图：
说明：
请选择房屋所在城市的效果是省市区选择器，刚开始我们可能直接在picker选择器中直接包含一个input输入框实现，但是这样的话点击选择的话可能聚焦在输入框中，我们想要的效果是点击的时候直接拉起省市区选择器。
解决办法：考虑到未选择前有文字提示，我们可以用判断city变量的方法条件显示提示和选择的内容，同时为了在表单提交中可以获取到内容，可以把选择的内容同时绑定到input输入框并且把input框隐藏。
<form catchsubmit="submitFn"><picker mode="region" bindchange="bindRegionChange" value="{{region}}"><view class="item"><text class="text">*</text><view class="weui-input" wx:if="{{city.length > 0}}">{{city}}</view><view class="input-placeholder" wx:else>请选择房屋所在城市</view><input type="text" name="city" value="{{city}}" hidden="true"/></view></picker><view class="item"><text class="text"></text><input type="text" name="address" value="{{LinkArea}}" class="weui-input" placeholder="请输入您的联系地址" placeholder-class="input-placeholder" /></view><view class="item"><text class="text"></text><input type="text" name="area" value="{{area}}" class="weui-input" placeholder="请输入房屋面积" placeholder-class="input-placeholder" /></view><view class="item"><text class="text">*</text><input type="text" name="phone" value="{{phone}}" class="weui-input" placeholder="请输入联系电话" placeholder-class="input-placeholder" /></view><button class="btn" formType="submit"><text>立即提交</text></button><view class="desc">装企提供免费上门量房服务、出3套方案供您对比</view></form>
data: {city:[],//所在城市LinkArea:'',//联系地址area: "",//房屋面积phone: "",//联系电话region: ["广东省", "广州市", "海珠区"],},// 表单提交submitFn: function (e) {let that = this;if (e.detail.value.city == "") {wx.showToast({title: "请选择房屋所在城市",icon: "none",});return false;}if (e.detail.value.phone == "") {wx.showToast({title: "请输入联系电话",icon: "none",});return false;}// 验证电话格式if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(e.detail.value.phone)) {wx.showToast({title: "手机号码有误",duration: 2000,icon: "none",});return false;}wx.request({url: util.domain+'portal/index/biaodan', //仅为示例，并非真实的接口地址data: e.detail.value,method: "POST",success (res) {let e = res.data;if(e.code == 1){that.setData({city: "",LinkArea:"",area: "",name: "",phone: "",})}wx.showToast({title: e.msg,duration: 2000,icon: "none",});}})},// 选择城市bindRegionChange: function (e) {console.log("picker发送选择改变，携带值为", e.detail.value);this.setData({city: e.detail.value,region: e.detail.value});console.log(this.data.city)},
.forms .item {height: 85rpx;background-color: #fff;border: solid 1rpx #dddddd;border-radius: 10rpx;padding: 0 10rpx;margin-bottom: 20rpx;display: flex;align-items: center;}.forms .item .text {color: #ff0000;display: inline-block;width: 30rpx;font-size: 24rpx;}.forms .item .picker {flex: 1;height: 100%;display: flex;align-items: center;}.forms .item .weui-input {font-size: 28rpx;flex: 1;}.forms .item .input-placeholder {color: #999;font-size: 28rpx;flex: 1;}.forms .btn {width: 100%;height: 85rpx;background-color: #00a0e9;box-shadow: 3rpx 4prx 13rpx 0rpx rgba(93, 200, 249, 0.59);border-radius: 6rpx;text-align: center;line-height: 85rpx;margin: 30rpx 0;position: relative;}.forms .btn text {color: #fff;}.forms .desc {text-align: center;color: #999;font-size: 26rpx;}
优秀博文：
小程序获取表单输入值
