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

最新推荐文章于 2023-06-16 16:31:58 发布

卓洛不迷路

最新推荐文章于 2023-06-16 16:31:58 发布

阅读量8.1k

点赞数

分类专栏： Hybrid开发文章标签： hybrid js

本文链接：https://blog.csdn.net/fxp850899969/article/details/53288074

版权

Hybrid开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

效果图如下：

界面布局：

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