【微信小程序】表单提交验证及获取表单输入的值

效果图：

说明：请选择房屋所在城市的效果是省市区选择器，刚开始我们可能直接在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;
}

优秀博文：
小程序获取表单输入值

【微信小程序】表单提交验证及获取表单输入的值相关推荐

微信小程序（第二十二章）- 表单数据提交
微信小程序(第二十二章)- 表单数据提交问题实现步骤问题什么时候(怎样)提交数据? 当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 ...
微信小程序中的正则验证、手机号验证随笔
微信小程序中的正则验证.手机号验证随笔需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法 $ ...
微信小程序各错误码及原因自用表
微信小程序各错误码及原因自用表错误号错误原因 -401001 无权限使用 API -401002 API 传入参数错误 -401003 API 传入参数类型错误 -402001 检测到循环引用 - ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...
微信小程序-登陆注册滑块验证
微信小程序-登陆注册滑块验证一.创建自定义组件MoveVerify 二.在index页面使用一.创建自定义组件MoveVerify MoveVerify.js Component({/*** 组件 ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...

【微信小程序】表单提交验证及获取表单输入的值

【微信小程序】表单提交验证及获取表单输入的值相关推荐

最新文章

热门文章