v-form中实现关联Source IP、Destination IP的Destination Port条件验证

这个需求完全可以实现，你当前用的VeeValidate校验库支持动态规则配置，按以下步骤修改即可：

步骤1：新增计算属性动态生成端口校验规则 #

在你组件的script部分的computed配置中新增以下逻辑，根据两个IP的填写状态动态判断是否需要给端口加必填校验：

computed: {
  portValidationRules() {
    // 基础的端口格式校验规则
    const rules = {
      regex: /^(\*[0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
    }
    // 满足条件：Source IP已填写、Destination IP未填写时，端口设为必填
    if (this.sourceip && !this.destinationip) {
      rules.required = true
    }
    return rules
  }
}

步骤2：修改模板中的表单字段配置 #

修改三个表单字段的校验和事件配置，实现状态联动：

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Firewall Logs</div>
      </v-card-title>
      <v-card-text>
          <v-form v-model="valid" ref="form" lazy-validation>
            <v-text-field
                label="Source IP"
                v-model="sourceip"
                v-validate="'required|ip'"
                data-vv-name="sourceip"
                :error-messages="errors.collect('sourceip')"
                required
                <!-- IP修改时触发端口重新校验 -->
                @input="$validator.validate('destinationport')"
            ></v-text-field>
            <v-text-field
                label="Destination IP"
                v-model="destinationip"
                v-validate="'ip'"
                data-vv-name="destinationip"
                :error-messages="errors.collect('destinationip')"
                <!-- 移除原有的required属性，目标IP为选填 -->
                <!-- IP修改时触发端口重新校验 -->
                @input="$validator.validate('destinationport')"
            ></v-text-field>
            <v-text-field
                label="Destination Port"
                v-model="destinationport"
                <!-- 绑定动态生成的校验规则 -->
                v-validate="portValidationRules"
                data-vv-name="destinationport"
                hint="Enter port number between 0 and 65535 or '*' if port is unknown"
                :error-messages="errors.collect('destinationport')"
            ></v-text-field>
            <v-select
                item-value="string"
                v-model="day"
                :items="days"
                label="Days To Search"
                hint="Go back up to 7 days to expand the query"
                v-on:change="reset"
            ></v-select>
          </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn small color="error" @click="cancel">Cancel</v-btn>
        <v-btn small color="warning" @click="reset">Reset</v-btn>
        <v-btn small color="success" @click="submit" :disabled="!valid">
          Submit
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

校验效果说明 #

• 已填写Source IP、未填写Destination IP时，Destination Port会强制校验必填，未填写无法提交表单
• 同时填写Source IP和Destination IP时，Destination Port仅校验端口格式，无必填要求
• Source IP为固定必填项，未填写时表单本身就无法提交

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