JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    IP and Port:
    <input placeholder="255.255.255.255:5000" />
</label>

CSS

body {
    font-family: sans-serif;
}
.invalid {
    color: red;
}

JavaScript

document.querySelector("input").oninput = function (e) {
    this.className = validateIpAndPort(this.value) ? "" : "invalid";
}

function validateIpAndPort(input) {
    var parts = input.split(":");
    var ip = parts[0].split(".");
    var port = parts[1];
    return validateNum(port, 1, 65535) && ip.length == 4 && ip.every(function (segment) {
        return validateNum(segment, 0, 255);
    });
}

function validateNum(input, min, max) {
    var num = +input;
    return num >= min && num <= max && input === num.toString();
}