微信 小程序布局 提交表单

<view class='hong-contant'>
<form bindsubmit="teformSubmit">
<view class='contant-teamwork'>
<view class='teamwork-inputs'>
<view class='inputs-box flexba'>
<text>姓名</text>
<input maxlength="20" name="name" placeholder='请输入您的姓名' />
</view>
<view class='inputs-box flexba'>
<text>出生年月</text>
<input maxlength="11" name="phone" placeholder='请输入您的联系电话' bindinput='blurPhonel' />
</view>
<view class='inputs-box flexba'>
<text>工作地址</text>
<input maxlength="100" name="addr" placeholder='请输入您的联系地址' />
</view>
<view class='inputs-box flexba'>
<text>身份证号</text>
<input maxlength="35" name="identity" placeholder='请输入您的身份证号' />
</view>
<view class='inputs-box flexba'>
<text>微信号 (选填)</text>
<input maxlength="35" name="weixin" placeholder='请输入您的微信号' />
</view>
</view>
<!-- 提交按钮 -->
<button class='teamwork-btn flexca' formType="submit">
<text>提交</text>
</button>
</view>
</form>
</view>
 
//-------------------------------------------------------
.hong-contant .inputs-box{
height: 88rpx;
padding: 0 24rpx;
border-bottom:1px solid #F7F7F7;
">#ffffff;
font-size: 30rpx;
color: #333333;
}
.hong-contant .inputs-box input{
font-size: 26rpx;
480rpx;
text-align: right;
}

/* 提交按钮 */
.hong-contant .teamwork-btn{
560rpx;
height: 88rpx;
border-radius: 50rpx;
color: white;
">#ff4273;
margin: 0 auto;
margin-top: 80rpx;
}
 
//-------------------------------------------------------------------------
// 提交请求
teformSubmit: function (e) {
let userInfo = this.data.userInfo
let that = this;
let user = wx.getStorageSync('user');
let userChe = e.detail.value
console.log(userChe)
if (userChe.name != '' && userChe.phone != '' && userChe.addr != '' && userChe.item != '') {
if (that.data.ajxtrue) {
wx.request({
url: app.globalData.hpUrl + 'addTeamwork', //仅为示例,并非真实的接口地址
data: {
uid: user.id,
userphone: userChe.phone,
username: userChe.name,
address: userChe.addr,
project: userChe.item
},
success: function (res) {
var result = res.data;
wx.showToast({
title: '提交成功',
icon: 'success',
duration: 1500
})
setTimeout(function () {
wx.switchTab({
url: '/pages/index/index'
})
}, 1500)
}
})
} else {
wx.showToast({
title: '手机号有误',
icon: 'success',
duration: 1500
})
}
} else {
wx.showToast({
title: '请填充完整',
icon: 'success',
duration: 1500
})
}
},
原文地址:https://www.cnblogs.com/dianzan/p/8006176.html