vue写一个IP地址校验

在Vue中，可以通过正则表达式来校验IP地址。下面是一个简单的示例：

<template>
  <div>
    <label>IP地址：</label>
    <input v-model="ip" @input="checkIp">
    <span v-if="error" style="color:red;">{{ error }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ip: '',
      error: ''
    }
  },
  methods: {
    checkIp() {
      const regex = /^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)$/
      if (!regex.test(this.ip)) {
        this.error = '请输入正确的IP地址'
      } else {
        this.error = ''
      }
    }
  }
}
</script>

这个示例中，我们使用了一个正则表达式来校验IP地址的格式。正则表达式的含义如下：

• ^ 表示从字符串的开头开始匹配。
• ( 表示分组。
• (25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d) 表示匹配一个IP地址的一段，可以是255、200~249、100~199、10~99、0~9中的任意一个数字。
• ) 表示分组结束。
• {3} 表示匹配前面的分组三次，也就是匹配IP地址的三个段。
• \. 表示匹配IP地址中的点。
• $ 表示匹配到字符串的结尾。

使用这个正则表达式，我们就可以判断用户输入的IP地址是否符合要求了。如果不符合要求，就显示一个错误提示。如果符合要求，就清空错误提示。