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





  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值