在vue的开发中，类似的通知设置添加手机号的校验，手机号正则表达式

 

原型图：

这样在点击去定按钮的时候就要把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('手机号格式错误，请输入正确的手机号');
        }

最终显示效果（其他情况样式一致）