微信小程序整合vantweapp van-field如何进行表单验证？

Question

返回给前端一个userInfo对象并复现，对象里还有其它数据，后面要对数据进行修改提交，通过model:value双向绑定没有效果，如何进行表单验证，能不能给个例子

<van-field  model:value="{{ userInfo.phone  }}" type="phone" label="手机号" placeholder="请输入手机号" required/>

Answer 1

小程序的双向绑定有一个层级问题。

data: {
  phone: '',
  userInfo: {
    phone: ''
  }
}

// 双向绑定有效
<input model:value="{{phone}}" name="name" placeholder="" />

// 双向绑定失效
<input model:value="{{userInfo.phone}}" name="name" placeholder="" />

看了下，vantweapp 没有 form 组件。你可以用小程序自带的form组件。
然后绑定 bindsubmit 事件，目前想到的如下:

    <form bindsubmit="bindsubmit">
      <van-field value="{{ phone }}" name="phone" required placeholder="请输入手机号" error-message="{{tips.phone}}" />
      <button type="primary" form-type="submit">提交</button>
    </form>

data:{
  // 错误提示文案，为空时不展示
  tips: {
    phone: ''
  }
},
bindsubmit(e) {
  console.log(e);
  let { phone } = e.detail.value;
  if (!phone) {
    this.setData({
      ['tips.phone']: '请填写手机号'
    });
    return;
  }
  // 对其它要判断的字段进行验证...
},