微信小程序表单校验提交重置,数据互通(没接触过小程序,第一次写小程序,简单做个总结),代码中注释比较详细,可以多注意
微信小程序页面
index.js页面
import WxValidate from '../../utils/WxValidate.js'Page({ data: { countyList: ['', '', '', ''], countyIndex: 0, default: '请选择(必填)', from:{ PHONE: '', NAME: '', } }, changeCounty(e) { let countyIndex = e.detail.value let countyList = this.data.countyList this.setData({ countyIndex, default: countyList[countyIndex] }) }, formSubmit: function (e) { console.log('form发生了submit事件，携带数据为：', e.detail.value); var that = this; var formData = e.detail.value; var AREA = this.data.countyList[e.detail.value.AREA]; formData.AREA=AREA; if (!this.WxValidate.checkForm(formData)) { const error = this.WxValidate.errorList[0] this.showModal(error) return false } wx.request({ url: 'URL', data: { formData }, method: 'POST', header: { 'content-type': 'application/json' }, success: function (res) { console.log('返回数据：', res); if (res.data.status == 1){ that.setData({ form_info: '' }) that.setData({ default: '请选择(必填)' }); wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) }else{ wx.showToast({ title: '失败', icon: 'error', duration: 2000 }) } }, }) }, formReset:function(e){ this.setData({ default:'请选择(必填)' }) }, showModal(error) { wx.showModal({ content: error.msg, }) }, initValidate:function() { const rules = { PHONE: { required: true, tel: true }, NAME: { required: true, maxlength: 10, }, } const messages = { PHONE: { required: '请填写联系电话', tel: '请填写正确的联系电话' }, NAME: { required: '请填写姓名', maxlength: '名称长度不超过10个字！' }, } this.WxValidate = new WxValidate(rules, messages) }, onLoad: function (options) { this.initValidate() },})
index.wxml页面
<!--pages/biji/biji.wxml--><form bindsubmit="formSubmit" bindreset="formReset"><view class='input_w professional'><text class='left'>投诉电话:</text><view class='input left'><input placeholder='请输入电话号码(必填)' cursor-spacing='20' name='PHONE' value='{{form_info}}'></input></view></view><view class='input_w professional'><text class='left'>客户名称:</text><view class='input left'><input placeholder='请输入客户名称(必填)' cursor-spacing='20' name='NAME' value='{{form_info}}'></input></view></view><view class='input_w professional'><text class='left'>地区选择:</text><view class='input left'><picker bindchange="changeCounty" value="{{countyIndex}}" range="{{countyList}}" name="AREA"> <view class="picker"> {{default}} </view> </picker></view></view><view class='textarea_w'><text class='left'>多行文本</text><view class='textarea left'><textarea placeholder='投诉内容(必填)' cursor-spacing='20' name="COMPLAIN_CONTENT" value='{{form_info}}'></textarea></view></view><button class='subClass_btn2' type="primary" formType="reset">重置</button><button class='subClass_btn2' type="primary" formType="submit">派单</button></form>
index.wxss页面 样式页面 没什么好看的
page{font-size: 30rpx;}.left{ float: left}.right{float: right}.index_seach {width: 100%;margin-top: 20rpx;height: auto;margin-bottom: 30rpx;}.input_w {width: 100%;height: 90rpx;line-height: 90rpx;}.input_w text {display: block;width: 20%;text-align: center;}.input_w .input {width: 75%;height: 70rpx;margin-top: 10rpx;border: 1px solid #ccc;box-sizing: border-box;}.input input {margin-top: 10rpx;margin-left: 10rpx;}.textarea_w {display: block;width: 100%;height: 180rpx;overflow: hidden;}.textarea_w text {display: block;width: 20%;text-align: center;line-height: 90rpx;}.textarea {width: 75%;height: 140rpx;margin-top: 10rpx;border: 1px solid #ccc;padding: 8rpx;overflow: hidden;}.textarea textarea {width: 100%;height: 130rpx;}.subClass_btn2 {margin-top: 40rpx;width: 80%;height
