百度小程序form表单提交到服务器带验证功能
最近博主开始研究百度智能小程序,在开发百度小程序的过程中,记录一下我遇到的问题。想通过百度小程序form表单提交到网站服务器上,实现接收客户信息的目的。以下是经本人实测,已经正式上线的form表单提交到服务器带验证功能的代码。
通过点击表单提交传输到JS文件进行处理,可以有效的判断姓名,手机号码的正确性。点击提交显示提交中,有利于提高用户体验。以下是详细的JS代码,分享给用需要的朋友。遇到任何问题欢迎交流。
formSubmit: function(e) { var Jobs = '普工'; var PostCode = '百度小程序'; var Age = e.detail.value.Age; var Gender = e.detail.value.Gender; var Linkman= e.detail.value.Linkman; var Mobile = e.detail.value.Mobile; var Address = e.detail.value.Address; if (Linkman == undefined || Linkman == null || Linkman == '') { swan.showModal({ title:'提示',content: '请输入姓名!', showCancel: false }); return; } if (Age == undefined || Age == null || Age == '') { swan.showModal({ title:'提示',content: '请输入年龄!', showCancel: false }); return; } if (Mobile == undefined || Mobile == null || Mobile == '') { swan.showModal({ title:'提示',content: '请输入手机号码!', showCancel: false }); return; } if(!(/^1[3456789]\d{9}$/.test(Mobile))) { swan.showModal({ title:'提示',content: '手机号码有误,请重新输入!', showCancel: false }); return; } swan.showToast({ title: '提交中...', icon: 'loading', duration: 1000 }); //等待提交弹窗 swan.request({ url: 'https://www.028foxconn.cn/', //开发者服务器接口地址,修改为你的服务器提交端口地址。 method: 'POST', dataType: 'json', data: { Jobs: Jobs, PostCode: PostCode, Linkman: Linkman, Gender: Gender, Age: Age , Mobile: Mobile, Address: Address, }, header: { 'content-type': ' application/x-www-form-urlencoded' }, success: function (res) { console.log(res.data); if (res.data !== null){ swan.showModal({title: '恭喜您,报名成功!',content: '招聘客服会在1个工作日内通知您面试',showCancel: false}); } else { swan.showToast({ title: '提交失败', icon: 'warn', duration: 2000 }); } }, fail: function (err) { console.log('错误码:' + err.errCode); console.log('错误信息:' + err.errMsg); } }); }
马到二类电商
哇,不错呀,百度发力小程序了。现在二类电商也在做小程序,可以看看。