vue校验动态添加输入的手机号是否重复

微信截图_20210902104824.png

现在有这样一个需求，动态添加手机号，并对其进行重复的校验。
先整理一下我的思路：

微信图片_20210902105014.jpg

来画重点：（取消聚焦的时候校验）
①每个手机号要有对应一个唯一的标识（我这里给它定义了id-这是我自动随机产生的）---这个很重要，千万不要用index（因为做删除的时候，这个就会有问题了）
②根据唯一的id来判断是否存在。
为什么要判断id而不是判断手机号(num)？
例子：你对某项进行了操作，该手机号不重复所以可以输入，这步是没有问题了。但是如果你想对当前项进行操作，比如你删掉数字了，再重新将之前的号码输入进去，你就会发现有问题了。它会告诉你之前已经输入过了。

接下来上主要的代码：

// 校验重复
    private phoneNumberBlur(val: any, index: number) {
        if (this.$getNameByNumId(this.phoneNumList, this.phoneNumListIdList[index].id)) {
            if(val) {
                if (val===this.$getNameByNum(this.phoneNumList, this.phoneNumListIdList[index].id)) {
                    return
                } else {
                    if (this.$getNameByNumBer(this.phoneNumList, val)) {
                        Dialog.confirm({
                            title: '提示',
                            message: '您已经添加过该手机号了，请忽重复添加！',
                            showCancelButton: false
                        }).then(() => {
                            Vue.set(this.dataList[index], "moblideID", "")
                        })
                    } else {
                        this.phoneNumList.forEach((item: any, indexChild: number) => {
                            if (item.id===this.phoneNumListIdList[index].id) {
                                this.phoneNumList[indexChild].num = val
                            }
                        })

                    }
                }
            } else {
                this.phoneNumList.forEach((item: any, indexChild: number) => {
                    if (item.id===this.phoneNumListIdList[index].id) {
                        this.phoneNumList[indexChild].num = val
                    }
                })
            }
        } else {
            if (val) {
                if (this.$getNameByNumBer(this.phoneNumList, val)) {
                    Dialog.confirm({
                        title: '提示',
                        message: '您已经添加过该手机号了，请忽重复添加！',
                        showCancelButton: false
                    }).then(() => {
                        Vue.set(this.dataList[index], "moblideID", "")
                    })
                } else {
                    const abj = {
                        id :this.phoneNumListIdList[index].id,
                        num: val
                    }
                    this.phoneNumList.push(abj)
                }
            }
        }
    }

就是这样啦~ 都包含全了~~~写得不好，但思路就是这样哈