小程序表单提交案例

wxml部分：

<form bindsubmit="formSubmit" method="post" action="http地址" name="myform" id="myform">

<view class='inputLayout'>

<image src='../../assets/images/f_01.png'></image>

<input class='input' value='{{form_info}}' placeholder='怎么称呼您' type='text' name="name" />

</view>

<view class='inputLayout'>

<image src='../../assets/images/f_02.png'></image>

<input class='input' value='{{form_info}}' placeholder='怎么联系您' maxlength='11' type='number' name="shouji" />

</view>

<view class='inputLayout'>

<image src='../../assets/images/f_03.png'></image>

<input class='input' value='{{form_info}}' placeholder='方便留下您的邮箱' type='text' name="email" />

</view>

<view class='inputLayout textareaStyle'>

<textarea class='input' value='{{form_info}}' type='text' name="introduce" maxlength='300' placeholder='有什么为您效劳...' />

</view>

<input class='hidden' type="hidden" name="typeid" value="1" />

<input class='hidden' type="hidden" name="subject" value="小程序表单" />

<button class='button' formType="submit" name="dosubmit">立即留言</button>

</form>

 

js部分：

// 表单提交数据

formSubmit: function(e) {

var mobile = e.detail.value['shouji'].trim();

var name = e.detail.value['name'].trim();

var resiphone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

if (name == null || name == "") {

this.showTost("请输入您的姓名")

return;

} else if (mobile == null || mobile == "") {

this.showTost("请输入联系方式")

return;

} else if (resiphone.test(mobile) == false) {

this.showTost("手机号格式不正确")

return;

} else {

var that = this;

var formDetail = e.detail.value;

wx.request({

url: yourUrl,

data: formDetail,

method: 'POST',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function(res) {

if (res.statusCode === 200) {

wx.showToast({

title: '预约成功',

icon: 'success',

duration: 1000

})

that.setData({

form_info: ''

})

} else {

wx.showToast({

title: '预约失败',

icon: 'none',

duration: 500

})

}

}

})

}

},

showTost(message) {

wx.showToast({

title: message,

icon: 'none',

duration: 500

})

},

 

wxss部分：

 

.formLayout {

width: 100%;

margin-top: 25rpx;

}

 

.inputLayout {

width: 100%;

height: 70rpx;

box-sizing: border-box;

border: solid #ccc 1rpx;

margin-top: 20rpx;

padding: 0 20rpx;

background-color: #fff;

display: flex;

align-items: center;

}

 

.inputLayout image {

width: 40rpx;

height: 40rpx;

padding-right: 10rpx;

margin-right: 10rpx;

vertical-align: middle;

border-right: solid 1rpx #ccc;

}

 

.textareaStyle {

height: 255rpx;

}

 

.input {

flex: 1;

box-sizing: border-box;

height: 100%;

display: inline-block;

font-size: 24rpx;

color: #000;

}

 

.textareaStyle .input {

padding: 20rpx;

width: 100%;

}

 

.button {

width: 100%;

line-height: 80rpx;

background-color: #203375;

font-size: 24rpx;

color: #fff;

text-align: center;

margin: 0 auto;

border-radius: 0;

margin-top: 35rpx;

}