微信小程序使用vant weapp的van-field,输入有内容时,表单校验数据一直为空的问题

在微信小程序中使用了van-field来输入用户的手机号码,并且实现实时校验手机号码的正确性,具体表现如下

主要原因是不支持数据双向绑定:当输入内容发生改变得时候,需要通过bind:change来将数据赋值给phoneNumber;

<van-field model:value="{{ phoneNumber }}" type="number" error-message="{{phoneNumberError}}" center clearable placeholder="请输入手机号码" use-button-slot bind:change="phoneNumberChange" bind:Confirm="bindPhoneNumber">
          <button disabled="{{phoneNumber && !phoneNumberDisabled ? false : true}}" type="primary" slot="button" size="mini" bindtap="bindPhoneNumber">确定</button>
        </van-field>
  phoneNumberChange (e) {
    const self = this;
    const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    let phoneNumber = seld.data.phoneNumber;
    phoneNumber = e.detail.value;
    self.setData({phoneNumber, phoneNumber}); //需要将数据先赋值给data中的phoneNumber
    let phoneNumberDisabled = self.data.phoneNumberDisabled;
    let phoneNumberError = self.data.phoneNumberError;
    if(!self.data.phoneNumber) {
      phoneNumberDisabled = true;
      phoneNumberError = '手机号码不能为空';
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
    else if(!reg.test(self.data.phoneNumber)) {
      phoneNumberDisabled = true;
      phoneNumberError = '手机号码格式不正确';
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
    else {
      phoneNumberDisabled = false;
      phoneNumberError = null;
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
  },

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值