在微信小程序中使用了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 })
}
},