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

效果图如下:

js实时校验输入的ip和端口号是否规范_第1张图片

js实时校验输入的ip和端口号是否规范_第2张图片


界面布局:

               
                 

页面提示信息:

             


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;
     }
}





你可能感兴趣的:(Hybrid开发)