微信小程序加vant列表表单验证-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序加vant列表表单验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<view class="item" wx:for="{{orderList}}" 		     wx:key="hotelOrderId" 
	wx:for-index="index">
   	<van-field
    size="large"
    bind:focus="priceFocus" type="number" 
    bind:blur="priceRules"
    model:value="{{ item.businessTravelValue }}" 
    right-icon="edit"
    placeholder="请填写金额"
	data-index="{{index}}"
    error-message="{{priceError}}" >
    <text decode="{{true}}" slot="label">金&ensp;额&emsp;（元）</text>
   </van-field>
</view>
//&emsp;占一个字符位&ensp;占半个字符位

priceRules(e) {
    console.log(e);
    let that = this
    let value = e.detail.value//输入得金额
    let index = e.currentTarget.dataset.index//对应列表的下标
    let hotelOrderId = that.data.orderList[index].hotelOrderId
    if (value < 200) {
      that.setData({
        priceError: '金额不得小于200元'
      })
    } else  if (value > 1000) {
        that.setData({
          priceError: '金额不得大于1000元'
        })
      }else {
        let arr=  that.data.orderList.map((item,index)=>{
        //找到数组对象中对应的那条数据
          if (item.hotelOrderId === hotelOrderId) {
            item.businessTravelValue = value
            //计算总金额哪个金额低取哪个
            item.totals = (item.businessTravelValue * item.stayDays < item.price * item.stayDays) ? item.businessTravelValue * item.stayDays : item.price * item.stayDays
          }
          return item //记得rerun
        })
        //更新列表
        that.setData({
          orderList:arr
        })
  }
  },
  //一个表单多个输入框赋值
  //modifyName(e){
   // let name = e.currentTarget.dataset.name
   // this.setData({
   //   [`submitFormData.${name}`]:e.detail,
   // }) 
  },