Vue组件中TextBox的IP地址验证功能未生效，求解决方法

修复独立验证类的问题 #

原代码存在两个核心错误：字符串无法直接调用正则方法、验证逻辑颠倒。修改后的验证类代码如下：

// validityCheck.js
// 使用正则字面量，避免转义问题，正确匹配IPv4格式
const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

export function validateIp(input) {
  // 匹配成功返回true（格式有效），失败返回false（格式无效）
  return ipRegex.test(input.trim());
}

主组件中正确调用验证并显示提示 #

需要导入验证函数，添加状态变量控制错误提示，同时正确处理输入事件：

<template>
  <div>
    <TextBox 
      :label="$t('ChangeServerIpAddress')" 
      v-model="ipAddress" 
      @input="checkIpValidity" 
    />
    <p v-if="isIpInvalid">IP地址格式不正确</p>
  </div>
</template>

<script>
import { validateIp } from './validityCheck.js'; // 导入验证函数

export default {
  data() {
    return {
      ipAddress: '',
      isIpInvalid: false
    };
  },
  methods: {
    checkIpValidity() {
      // 验证输入内容，更新错误状态
      this.isIpInvalid = !validateIp(this.ipAddress);
    }
  }
};
</script>

关键修复点说明 #

• 将字符串正则转为正则字面量：避免字符串转义错误，直接使用/.../格式，确保.被正确识别为匹配字面量点号。
• 修正验证逻辑：原代码中匹配成功返回false，现在改为匹配成功返回true，符合直观逻辑。
• 添加状态变量isIpInvalid：用来控制错误提示的显示/隐藏，替代原代码中固定的v-if="false"。
• 正确处理输入事件：通过@input触发验证方法，使用v-model绑定的ipAddress值进行验证，确保每次输入都实时校验。

内容的提问来源于stack exchange，提问作者user23376145