小程序开发之表单的提交介绍

小程序的表单提交是比较常见的功能，伴随获得昵称与头像接口的取消，用户需要自己填写才行，下面大家举例说明一个修改用户信息的表单，如下图所示：

其中wxml的代码如下所示：form bindsubmit=saveData report|submit=trueview class=formview class=input|boxview class=name昵称/viewinputclass=text type=text name=nickname value={{model.nickname}} placeholder=昵称 //viewview class=input|boxview class=name电话/viewview class=phone{{model.username}}/view/viewview class=input|boxview class=name性别/viewpicker class=picker|box bindchange=bindPickerChange value={{index}} range={{array}}view class=picker{{array[index]}}/view/picker /viewview class=input|boxview class=name过生日/viewpicker class=picker|box mode=date value={{date}} start=1960|01|01 end=2020|01|01 bindchange=bindDateChangeview class=picker {{date==?选择日期:date}}/view/picker/viewview class=input|boxview class=nameQQ/viewinput class=text type=text name=qq value={{model.qq}} placeholder=QQ //viewview class=input|boxview class=name邮箱/viewinput class=text type=text name=email value={{model.email}} placeholder=邮箱 //viewview class=input|boxview class=name公司名字/viewinput class=text type=text name=company value={{model.company}} placeholder=公司名字 //viewbutton class=btn|submit formType=submit disabled={{disabled}}保存修改/button/view/form代码说明：当用户点击保存修改的按钮时，即触发bindsubmit=saveData中的saveData办法。disabled={{disabled}}的值变改true，即按钮变成灰色，以预防用户重复点击，不过假如提交的信息有误，需要提示并重新让disabled=false,用户修改资料后可继续提交。还有JS代码如下所示:初始化参数如下：data: {headpic: ,//默认微信头像图片nickname: ,//默认微信名字,array: [请选择,男, 女],index: 0,date:,multiIndex: [0, 0, 0],date: 未设置,disabled:false},提交表单的办法如下：savedata: function(e) {let |this = this,values = e.detail.value//获得整个表单填写的内容的数组,如values.company即用户填写的公司名字// 进行表单验证，调用validation办法if (!|this.validation(values)) {util.showError(|this.data.error);return false;}wx.showLoading({title: 正在修改中...,//提交过程的提示})|this.setData({disabled: true,//预防用户重复点击})var date = |this.data.datevar index = |this.data.indexvar member|id = wx.getStorageSync(member|id)//获得缓存数据member|id会员idvar url|wx|update = util.getApiUrl(app, /Member/info|edit, )var post|data|wx = {member|id:member|id,nickname: values.nickname,birthday:date,index:index,qq: values.qq,email: values.email,company: values.company,}util.|post|from(url|wx|update, post|data|wx, function (res|update) {//提交表单，更新用户信息console.log(res|update)if (res|update.data.code == 200) {//200是成功返还的参数console.log(data)console.log(res|update.data)wx.hideLoading()util.showNotice(修改成功)//更新用户信息后跳转到会员中心，因为会员中心页面是tabbar页面，所以此处用wx.switchTab做为跳转。setTimeout(function () {wx.switchTab({url: /pages/member/index})}, 2000)} else {util.showNotice(res|update.data.msg)wx.hideLoading()|this.setData({disabled: true,})}})},其他表单验证的办法如下：validation: function(values) {var |this = thisif (values.realname == ) {|this.data.error = 昵称不可以为空;//一个错误的提示return false;//返回false,则会用util.showError(|this.data.error)弹窗提示|this.data.error内容}return true;//假如表单的验证都正确，则返回true},修改成功后弹窗提示如下图所示：

此办法的闪光点主如果validation办法，用了这个可以省不少代码，不再需要逐一获得每一个参数的值，而是直接把数组传递到validation办法进行有规则的判断。