js输入框输入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()    //转成字符串格式
    }
}