微信小程序加vant列表表单验证

Posted 2022-12-01 单身girl

<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,
   // ) 
  ,