js输入框输入IP地址段

最新推荐文章于 2023-09-22 20:56:26 发布

原创最新推荐文章于 2023-09-22 20:56:26 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

Vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

该博客介绍了在 Vue.js 框架中如何使用正则表达式进行 IP 地址的验证，包括单个 IP、IP 地址段以及多个 IP 的匹配。同时，讨论了如何处理输入的 IP 地址格式，确保去除空格并正确匹配。文中提供了详细的正则表达式示例和验证方法，展示了如何通过数组操作和字符串转换来实现更严格的 IP 格式检查。

在Vue中

<textarea v-model= "textareaValue"></textarea>

<script>
export default {
    data(){
        return{
            textareaValue: ""    //存放输入框的值
        }
    }
}
</script>

匹配一条IP地址

//定义一个正则的判断表达式
//一条IP的正则
const reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/

匹配IP地址段，如图所示，通过换行符\n进行匹配

const reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(\n((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/

在这里插入图片描述

匹配IP地址段，如图所示，通过逗号，进行匹配

//多条IP的正则
const reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(,((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/

在这里插入图片描述
验证方法如下：

methods: {
    reg() {
        console.log('输入框的值', this.textareaValue)    //获取输入框的值
        if(!reg.test(this.textareaValue)){                //利用test()方法验证是否匹配正则表达式，匹配则返回true,反之则返回false
            console.log("输入的IP地址格式错误！")
            return
        } else {
            console.log("输入的IP地址格式正确！")
        }
    }
}

上述方法写的太绝对，如果不小心多复制了个空格，也会匹配错误，所以要对IP地址做一个格式处理。
思路如下：
例如输入的ip地址为：“127.0.0.1 \n127.0.0.1 \n127.0.0.1 ”

首先通过换行符进行分割成一个数组； [127.0.0.1 ,127.0.0.1 ,127.0.0.1 ]
遍历数组，通过replace()方法去掉所有的空格，再进行正则匹配验证
最后通过join()方法转换成字符串格式

methods: {
    reg() {
        const reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/
        console.log('输入框的值', this.textareaValue)    //获取输入框的值
        let ipArray = this.textareaValue.split('\n')
                for (let i in ipArray) {
                    ipArray[i] = ipArray[i].replace(/\s/g, '')    //去掉数组元素的空格
           if(!reg.test(ipArray[i])) {        //数组每个元素进行正则匹配
                console.log(ipArray[i])        //可以打印出输入错误的IP
                console.log('IP地址输入格式有误！')
                return
            }
		}
		let newIP = ipArray.join()    //转成字符串格式
    }
}