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

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

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

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


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

 

你可能感兴趣的:(微信小程序,小程序)