如何实现IP/URL输入框输入IP时与纯IP输入框的一致性验证

第一步：修复验证工具类的正则错误 #

你当前的ValidityCheck存在两处正则问题，会导致IP验证失效：

• validationInput方法的IP正则未完成，缺少最后一段IP的匹配规则
• validateUrl方法的IP正则仅匹配两段地址，且错误使用了双反斜杠

修改后的工具类如下：

export class ValidityCheck {
  // 验证合法IPv4地址
  static validateIp(ipAddress) {
    const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return ipPattern.test(ipAddress.trim());
  }

  // 验证输入是IP/URL/无效格式
  static validateUrlOrIp(input) {
    const trimmedInput = input.trim();
    // 优先判断是否为IP
    if (this.validateIp(trimmedInput)) {
      return 'IP';
    }
    // 验证不带http/https/www前缀的URL
    const urlRegex = /^(?!http:\/\/|https:\/\/|www\.)[^\s\/$.?#].[^\s]*$/;
    if (urlRegex.test(trimmedInput)) {
      return 'URL';
    }
    return 'Invalid';
  }
}

第二步：添加IP一致性校验逻辑 #

在组件中新增状态变量存储匹配结果，并编写统一的校验方法，确保两个输入框变更时都能触发一致性检查：

1. 更新组件的data定义：

data() {
  return {
    url: '',
    ipAddress: '',
    isValid: true,
    isUrlValid: 'Valid',
    showMessage: false,
    showMessageUrl: false,
    isIpMismatch: false // 标记IP是否不匹配
  };
}

2. 完善组件的方法：

methods: {
  validateIpAddress() {
    this.isValid = ValidityCheck.validateIp(this.ipAddress);
    this.showMessage = true;
    // 纯IP框变更时，同步检查URL框的IP一致性
    this.checkIpConsistency();
  },
  validateUrl() {
    this.isUrlValid = ValidityCheck.validateUrlOrIp(this.url);
    this.showMessageUrl = true;
    // URL框变更时，检查IP一致性
    this.checkIpConsistency();
  },
  // 统一处理IP匹配逻辑
  checkIpConsistency() {
    // 仅当URL框输入的是IP，且纯IP框为有效IP时，才执行对比
    if (this.isUrlValid === 'IP' && this.isValid) {
      this.isIpMismatch = this.url.trim() !== this.ipAddress.trim();
    } else {
      // 其他情况清除不匹配标记
      this.isIpMismatch = false;
    }
  }
}

第三步：更新模板显示校验提示 #

在输入框下方添加对应的错误提示：

<TextBox v-model="url" @input="validateUrl"/>
<div v-if="showMessageUrl" style="color: red; margin-top: 4px;">
  <span v-if="isUrlValid === 'Invalid'">输入格式无效，请输入合法IP或URL</span>
  <span v-if="isIpMismatch">输入的IP必须与左侧IP地址一致</span>
</div>

<TextBox v-model="ipAddress" @input="validateIpAddress"/>
<div v-if="showMessage" style="color: red; margin-top: 4px;">
  <span v-if="!isValid">请输入有效的IPv4地址</span>
</div>

这样就能实现需求：当URL输入框输入IP时，强制与纯IP输入框的内容保持一致，同时保留各自的格式校验逻辑。

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