原型图:
这样在点击去定按钮的时候就要把phone phsh 到phones这个数组中,并在黄色区域内显示。这样就需要尽享手机号的验证。要验证是哪个方面:1、手机号的格式,2、添加多个手机号的时候验证一下是否有手机号重复,3、验证phone是否为空。
这里在验证手机号是否重复的时候用到数组的一个方法:includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false
代码部分:
toAddPhone(){
//截止2019/1/1 已开通的号段
const reg = /^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))\d{8}$/;
if (reg.test(this.phone) && !this.phones.includes(this.phone)){
//ajax...
alert('添加手机号成功');
this.phones.push(this.phone);
this.showModal = false;
this.phone = '';//将showModel中的phone清空
// 添加号码失败
} else if (this.phones.includes(this.phone)) {//验证手机号是否有重复
alert('手机号码已存在');
} else if (this.phone === '') {//验证输入的是否为空
alert('请输入手机号');
}
else
alert('手机号格式错误,请输入正确的手机号');
}
最终显示效果(其他情况样式一致)