vant中表单验证

Posted 2023-04-25

参考技术A 在Vant中，表单验证有两种策略
1：直接用ui组件中form验证（比较麻烦）
2：收集到数据之后，自行验证（原理：利用field自带的属性）

第一步：给vant-field 添加error-message属性

第二步：准备数据

需要实时校验效果，给vant-field注册input事件，调用封装的方法即可
在点击登录（或者其他表单验证的场景中），可以先声明一个变量用来接收validate()的返回值，如果返回值是true，即发送请求，如果返回值是false，即表单填写不完整，不发送请求

/正则表达式/.test(this.mobile) 此语法是使用正则表达式判定该值是否满足条件

微信小程序加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,
   // ) 
  ,