微信小程序的表單提交是比較常用的功能,隨著獲得昵稱與頭像接口的取消,用戶需要自己填寫才行,下面我們舉例說明一個(gè)修改用戶信息的表單,如下圖所示:
其中wxml的代碼如下所示:
<form bindsubmit="saveData" report-submit="true">
<view class="form">
<view class="input-box">
<view class="name">昵稱</view>
<input class="text" type="text" name="nickname" value="{{model.nickname}}" placeholder="昵稱" />
</view>
<view class="input-box">
<view class="name">電話</view>
<view class="phone">{{model.username}}</view>
</view>
<view class="input-box">
<view class="name">性別</view>
<picker class="picker-box" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">{{array[index]}}</view></picker> </view>
<view class="input-box">
<view class="name">生日</view>
<picker class="picker-box" mode="date" value="{{date}}" start="1960-01-01" end="2020-01-01" bindchange="bindDateChange">
<view class="picker"> {{date==''?'選擇日期':date}}</view>
</picker>
</view>
<view class="input-box">
<view class="name">QQ</view>
<input class="text" type="text" name="qq" value="{{model.qq}}" placeholder="QQ" />
</view>
<view class="input-box">
<view class="name">郵箱</view>
<input class="text" type="text" name="email" value="{{model.email}}" placeholder="郵箱" />
</view>
<view class="input-box">
<view class="name">公司名稱</view>
<input class="text" type="text" name="company" value="{{model.company}}" placeholder="公司名稱" />
</view>
<button class="btn-submit" formType="submit" disabled="{{disabled}}">保存修改</button>
</view>
</form>
代碼說明:當(dāng)用戶點(diǎn)擊“保存修改”的按鈕時(shí),即觸發(fā)bindsubmit="saveData"中的saveData方法。disabled="{{disabled}}"的值變改true,即按鈕變成灰色,以防止用戶重復(fù)點(diǎn)擊,不過如果提交的信息有誤,需要提示并重新讓disabled=”false”,用戶修改資料后可繼續(xù)提交。
還有JS代碼如下所示:
初始化參數(shù)如下:
data: {
headpic: '',//默認(rèn)微信頭像
nickname: '',//默認(rèn)微信昵稱,
array: ['請(qǐng)選擇','男', '女'],
index: 0,
date:"",
multiIndex: [0, 0, 0],
date: '未設(shè)置',
disabled:false
},
提交表單的方法如下:
saveData: function(e) {
let _this = this,
values = e.detail.value //獲取整個(gè)表單填寫的內(nèi)容的數(shù)組,如values.company即用戶填寫的公司名稱
// 進(jìn)行表單驗(yàn)證,調(diào)用validation方法
if (!_this.validation(values)) {
util.showError(_this.data.error);
return false;
}
wx.showLoading({
title: '正在修改中...',//提交過程的提示
})
_this.setData({
disabled: true,//防止用戶重復(fù)點(diǎn)擊
})
var date = _this.data.date
var index = _this.data.index
var member_id = wx.getStorageSync('member_id') //獲取緩存數(shù)據(jù)member_id會(huì)員id
var 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是成功返還的參數(shù)
console.log('data')
console.log(res_update.data)
wx.hideLoading()
util.showNotice('修改成功')
//更新用戶信息后跳轉(zhuǎn)到會(huì)員中心,由于會(huì)員中心頁(yè)面是tabbar頁(yè)面,所以此處用wx.switchTab做為跳轉(zhuǎn)。
setTimeout(function () {
wx.switchTab({
url: '/pages/member/index'
})
}, 2000)
} else {
util.showNotice(res_update.data.msg)
wx.hideLoading()
_this.setData({
disabled: true,
})
}
})
},
其他表單驗(yàn)證的方法如下:
validation: function(values) {
var _this = this
if (values.realname == '') {
_this.data.error = '昵稱不能為空'; //一個(gè)錯(cuò)誤的提示
return false; //返回false,則會(huì)用 util.showError(_this.data.error)彈窗提示_this.data.error內(nèi)容
}
return true; //如果表單的驗(yàn)證都正確,則返回true
},
修改成功后彈窗提示如下圖所示:
此方法的亮點(diǎn)主要是validation方法,用了這個(gè)可以省很多代碼,不再需要逐一獲取每個(gè)參數(shù)的值,而是直接把數(shù)組傳遞到validation方法進(jìn)行有規(guī)則的判斷。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自http://www.sdlwjx666.com/news/6747.html