【微信小程序】表单验证提交

效果图：

说明：点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟vue的input双向绑定不同，微信小程序只能通过button按钮提交form表单，然后通过监听表单提交方法去获取提交的数据。

<!-- 表单 -->
<view class="forms"><view class="container"><image class="bg" src="../../images/formBg.png" mode="aspectFill"></image><view class="title"><text class="text">我家装修需要花多少钱？</text><text class="text">免费快速获取预算方案</text></view><form class="" catchsubmit="submitFn"><view class="item"><text class="text">*</text><picker class="" mode="region" bindchange="bindRegionChange" value="{{region}}"><input type="text" name="city" value="{{city}}" placeholder="请选择房屋所在城市" placeholder-class="input-placeholder" /></picker></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="name" value="{{name}}" 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><!-- <image class="img" src="../../images/headglobal.png" mode="aspectFill"></image> --></button><view class="desc">装企提供免费上门量房服务、出3套方案供您对比</view></form></view>
</view>

.forms {padding: 0 30rpx;.container {position: relative;width: 100%;padding: 20rpx;}.bg {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: -1;}.title {text-align: center;margin-bottom: 40rpx;.text {display: block;font-size: 48rpx;color: #000;}}.item {height: 65rpx;background-color: #fff;border: solid 1rpx #dddddd;border-radius: 10rpx;padding: 0 10rpx;margin-bottom: 20rpx;display: flex;align-items: center;.text {color: #ff0000;display: inline-block;width: 30rpx;font-size: 24rpx;}.weui-input {font-size: 28rpx;}.input-placeholder {color: #999;}}.btn {width: 100%;height: 75rpx;background-color: #00a0e9;box-shadow: 3rpx 4prx 13rpx 0rpx rgba(93, 200, 249, 0.59);border-radius: 6rpx;text-align: center;line-height: 75rpx;margin: 30rpx 0;position: relative;text {color: #fff;}}.desc {text-align: center;color: #999;font-size: 26rpx;}.img {position: absolute;width: 31rpx;height: 47rpx;right: 80rpx;top: 40rpx;}
}

data:{city:'',area: "",name: "",phone: "",region: ["广东省", "广州市", "海珠区"],
},
// 表单提交
submitFn: function (e) {console.log(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;}
},
// 选择城市
bindRegionChange: function (e) {console.log("picker发送选择改变，携带值为", e.detail.value);this.setData({city: e.detail.value,});
},

官网：表单组件form

【微信小程序】表单验证提交相关推荐

微信小程序表单 form 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 表单.将组件内的用户输入的switch input checkbox slider radio picker 提交. 当点击 form 表单 ...
微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）
js代码 Page({/*** 页面的初始数据*/data: {indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,p ...
微信小程序***实现身份验证
标题微信小程序***实现身份验证本次实现了身份验证功能,本功能需要提交身份证正面照片,反面照片,手持身份证等四张张照片,提交成功后等待工作平台审核,审核成功后即可完成身份验证. WXML: JS: ...
微信小程序调用指纹验证
微信小程序调用指纹验证共有三个相关的接口 1.wx.checkIsSupportSoterAuthentication() 获取本机支持的 SOTER 生物认证方式 wx.checkIsSupport ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
微信小程序-拼图动态验证
微信小程序-拼图动态验证一.创建自定义组件verification-puzzle 二.在index页面使用一.创建自定义组件verification-puzzle verification-puz ...
小程序表单 formId 为 the formId is a mock one
微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性 report-submit="true" . ...
【微信小程序】微信小程序使用表单的一些坑和注意事项
遇到的问题这几天写微信小程序的vant样式表单提交时,遇到一些很少见的问题.我在表单中使用弹出层(Popup)或者单选框(radio),多选框(checkbox)回调时,再点提交是获取不到回调的值, ...
淘宝小程序表单组件checkbox的默认样式修改
场景每款产品都会有自己的定制化UI,这两天遇到的问题就是设计稿的复选框样式问题.自己试了很多种方法都没成功,百度查找资料或者相关代码,检索出来的都是与微信小程序相关的. 无奈之下,我在淘宝开放平台提 ...

【微信小程序】表单验证提交

【微信小程序】表单验证提交相关推荐

最新文章

热门文章