js实时校验输入的ip和端口号是否规范

效果图如下：





界面布局：

<div class="login_item" id="login_item_ip">
<img class="login_input_icon mr10" id="login_ip_icon" src="images/login/login_icon_ip.png">
<input class="login_input_txt" type="text" id="ip_adress" placeholder="请输入IP地址" required>
<img class="login_input_clear" id="login_ip_clear" src="images/login/login_input_remove.png">
</div>
<div class="login_item" id="login_item_port">
<img class="login_input_icon mr10" id="login_port_icon" src="images/login/login_icon_port.png">
<input class="login_input_txt" type="text" id="port_num" placeholder="请输端口号" required>
<img class="login_input_clear" id="login_port_clear" src="images/login/login_input_remove.png">
</div>
页面提示信息：

<div class = "login_tips" id = "login_tips">
<img src = "images/login/login_icon_tip.png">
<a id="login_tips_txt">配置信息不完整</a>
</div>

ip端口输入框监听：

/*控制ip输入框清除图标显示状态*/
$$(document).on('keyup','#ip_adress',function(){
var value_1 = this.value;
if(isIP(value_1)){
if($$("input[id='port_num']").val().trim() != ""){
if(isPort($$("input[id='port_num']").val().trim())){
$$('#login_tips').css("display","none");
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "你输入的端口号不合规范";
}
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "配置信息不完整";
}
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "你输入的ip不合规范";
}
if(value_1 != null && value_1 != undefined && value_1.trim() != ""){
$$('#login_ip_clear').css("opacity","1");
}else{
$$('#login_ip_clear').css("opacity","0");
}
});

/*控制端口输入框清除图标显示状态*/
$$(document).on('keyup','#port_num',function(){
var value_2 = this.value;
if(isPort(value_2)){
if($$("input[id='ip_adress']").val().trim() != ""){
if(isIP($$("input[id='ip_adress']").val().trim())){
$$('#login_tips').css("display","none");
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "你输入的ip不合规范";
}
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "配置信息不完整";
}
}else{
$$('#login_tips').css("display","block");
document.getElementById("login_tips_txt").innerHTML = "你输入的端口号不合规范";
}
if(value_2 != null && value_2 != undefined && value_2.trim() != ""){
$$('#login_port_clear').css("opacity","1");
}else{
$$('#login_port_clear').css("opacity","0");
}
});

IP地址规范验证：

/*ip号校验*/
function isIP(ip)
{
var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if (reSpaceCheck.test(ip))
{
ip.match(reSpaceCheck);
if (RegExp.$1<=255&&RegExp.$1>=0
&&RegExp.$2<=255&&RegExp.$2>=0
&&RegExp.$3<=255&&RegExp.$3>=0
&&RegExp.$4<=255&&RegExp.$4>=0)
{
return true;
}else
{
return false;
}
}else
{
return false;
}
}

端口号规范性验证：
/*端口号校验*/
function isPort(str)
{
var parten=/^(\d)+$/g;
if(parten.test(str)&&parseInt(str)<=65535&&parseInt(str)>=0){
return true;
}else{
return false;
}
}