VUE 表单校验 validator--ip地址（单个，多个）、端口号

1、效果图

2、代码

（1）表单

<el-form-item label="ip地址" prop="data4">
  <el-input class="w-450" size="small" v-model="dialogSecondForm.data4" placeholder="请输入ip地址"></el-input>
</el-form-item>
<el-form-item label="端口号" prop="data5">
  <el-input class="w-450" size="small" v-model="dialogSecondForm.data5" placeholder="请输入端口号"></el-input>
</el-form-item>

（2）校验方法

data4: [
  {required: true, message: '请输入ip地址', trigger: 'blur'},
  {required: true, trigger: 'blur', validator: checkIPCode},
],
data5: [
  {required: true, message: '请输入端口号', trigger: 'blur'},
  {required: true, trigger: 'blur', validator: checkPortCode},
],

const checkIPCode = (rule, value, callback) => {
  if (/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/.test(value) == false) {
    callback(new Error("请输入正确的ip地址"));
  } else {
    callback();
  }
}
const checkPortCode = (rule, value, callback) => {
  if (/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(value) == false) {
    callback(new Error("请输入正确的端口号"));
  } else {
    callback();
  }
}

（3）ip地址要支持输入多个ip,ip2,ip3,ip4这种格式，并进行校验

const checkIPCodes = (rule, value, callback) => {
  // 分割字符串为数组，每个元素是一个IP地址
  const ips = value.split(',');

  // 遍历IP地址数组，对每个IP进行验证
  ips.forEach((ip) => {
    // 移除IP地址前后的空白字符
    const trimmedIP = ip.trim();

    // 使用正则表达式验证IP地址格式
    if (!/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/.test(trimmedIP)) {
      // 如果有不匹配的IP地址，返回错误
      callback(new Error("请输入正确的ip地址，每个ip地址用逗号分隔"));
      return; // 停止遍历
    }
  });

  // 如果所有IP地址都通过验证，调用callback()表示验证通过
  callback();
};