当前位置: 首页 站长交流

百度小程序form表单提交到服务器带验证功能

栏目:站长交流 作者:重庆幺哥电脑 时间:2018-12-04 10:14:01

最近博主开始研究百度智能小程序,在开发百度小程序的过程中,记录一下我遇到的问题。想通过百度小程序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);
    }
    });
   }

阅读:5720次
我要留言

网友留言

马到二类电商

哇,不错呀,百度发力小程序了。现在二类电商也在做小程序,可以看看。

2018-12-07 10:46:56 回复

iherb

收藏了
感谢分享

2019-06-25 15:39:27 回复

鳄鱼皮具

有没有简单的制作方法,免费的

2019-07-21 11:02:08 回复

我要留言

  

微信扫一扫 预约上门维修

分类栏目