小程序表单提交

本文主要是介绍小程序表单提交，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

wxml   <!-- form表单 -->       <view class="form">         <input class="name " bindinput="getInputName" maxlength="10" placeholder="收件人" placeholder-class="" />         <input class="tel " bindinput="getInputPhone" maxlength="11" placeholder="手机号码" placeholder-class="" />         <picker class="save" mode="region" bindchange="bindRegionChange" value="{{region}}">           <!-- < class="save" maxlength="10" placeholder="省" bindinput="getInputSave" /> -->           <view class="">             <view class="save_a">{{region[0]}}</view>             <view class="save_b">{{region[1]}}</view>           </view>         </picker>         <!-- <input class="city" maxlength="10" placeholder="市" bindinput="getInputCity" /> -->         <input class="address " placeholder="请输入详细地址" bindinput="getInputAddress" maxlength="50" placeholder-class="" />         <!-- 立即提交 -->         <view class="submit" bind:tap="goSubmit"></view>       </view> wxss /* form表单*/ .form {   width: calc(1125rpx / 1125 * 750);   height: calc(1327rpx / 1125 * 750);   position: absolute;   top: calc(967rpx / 1125 * 750);   left: 0;   font-size: calc(42rpx / 1125 * 750);   color: #979797; } .name {   width: calc(670rpx / 1125 * 750);   height: calc(111rpx / 1125 * 750);   position: absolute;   top: calc(351rpx / 1125 * 750);   left: calc(152rpx / 1125 * 750);   padding-left: calc(133rpx / 1125 * 750); } .tel {   width: calc(670rpx / 1125 * 750);   height: calc(111rpx / 1125 * 750);   position: absolute;   top: calc(520rpx / 1125 * 750);   left: calc(152rpx / 1125 * 750);   padding-left: calc(133rpx / 1125 * 750); } .address {   width: calc(670rpx / 1125 * 750);   height: calc(111rpx / 1125 * 750);   position: absolute;   top: calc(800rpx / 1125 * 750);   left: calc(152rpx / 1125 * 750);   padding-left: calc(133rpx / 1125 * 750); } .submit {   width: calc(461rpx / 1125 * 750);   height: calc(134rpx / 1125 * 750);   position: absolute;   top: calc(1050rpx / 1125 * 750);   left: calc(330rpx / 1125 * 750);   /* border: 1px solid red; */ }
.city {   width: calc(388rpx / 1125 * 750);   height: calc(111rpx / 1125 * 750);   position: absolute;   top: calc(680rpx / 1125 * 750);   left: calc(580rpx / 1125 * 750); } .save {   width: calc(800rpx / 1125 * 750);   height: calc(111rpx / 1125 * 750);   position: absolute;   top: calc(680rpx / 1125 * 750);   left: calc(150rpx / 1125 * 750);   line-height: calc(111rpx / 1125 * 750); } .save_a{   width: calc(300rpx / 1125 * 750);   position: absolute;   top: calc(0rpx / 1125 * 750);   left: calc(60rpx / 1125 * 750); } .save_b{   width: calc(300rpx / 1125 * 750);   position: absolute;   top: calc(0rpx / 1125 * 750);   left: calc(500rpx / 1125 * 750); } js   data: {     form: {       receiveAddress: "",       receiveName: "",       receivePhone: "",       receiveRegion: "",     },     region: ["省", "市"],   },  getInputName(e) {     this.setFormData("receiveName", e.detail.value);   },   getInputPhone(e) {     this.setFormData("receivePhone", e.detail.value);   },   getInputAddress(e) {     this.setFormData("receiveAddress", e.detail.value);   },   setFormData(formName, formValue) {     //  更新form里对应的参数     // 获取 data 里的 form     let form = this.data.form;     // 用输入的e.detail.value 更改获取到的form里的receiveName     form[formName] = formValue;     // 更新 data 里的 form     this.setData({       form,     });   },   bindRegionChange: function (e) {     console.log("picker发送选择改变,携带值为", e.detail.value);     let regionArr = e.detail.value;     this.setFormData("receiveRegion", regionArr.join(" "));     this.setData({       region: e.detail.value,     });   },   goSubmit() {     if (!this.data.form.receiveName ||       !this.data.form.receivePhone ||       this.data.form.receivePhone.length < 11 ||       !this.data.form.receiveAddress ||       !this.data.form.receiveRegion) {       wx.showLoading({         title: '请填写完整收货信息',         duration: 1500,       })       return     }     let form = this.data.form;     let id = app.globalData.cusGiftId     console.log(form, id);     app.reqPost(`***`, {       form,       id     }).then((res) => {       wx.hideLoading();       if (res.code = 100000) {         wx.showToast({           title: '提交成功',           icon: "success",           duration: 2000         })       }     })   },

这篇关于小程序表单提交的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！