丰满爆乳无码一区二区三区,欧美RAPPER潮水抽筋,精品夜夜爽欧美毛片视频,欧美XXXXX高潮喷水

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

微信小程序開發(fā)之表單的提交介紹

發(fā)表日期:2023-04-18 10:09:32   作者來(lái)源:陳應(yīng)信   瀏覽:3702   標(biāo)簽:微信小程序開發(fā)    
微信小程序的表單提交是比較常用的功能,隨著獲得昵稱與頭像接口的取消,用戶需要自己填寫才行,下面我們舉例說明一個(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
相關(guān)網(wǎng)站設(shè)計(jì)案例
进贤县| 廉江市| 恩平市| 泸州市| 宁津县| 罗山县| 潍坊市| 汉阴县| 桑日县| 绍兴县| 类乌齐县| 衡南县| 本溪市| 云安县| 乌兰浩特市| 盐池县| 胶南市| 大新县| 吴旗县| 牟定县| 洪泽县| 灵宝市| 佛山市| 永昌县| 剑阁县| 西昌市| 江永县| 象山县| 牙克石市| 哈尔滨市| 彭阳县| 宜章县| 灌云县| 连山| 桑植县| 望江县| 红河县| 衡水市| 大关县| 南通市| 元谋县|