正则表达式判断ip地址

html：

<div class="configuration">
<form action="" name="myformcon">
<ul>
<li>
<div class="configuration-left">
<div>*</div>
<div><b>监控指标:</b></div>
</div>
<div class="configuration-right">
<input type="radio" name="control" checked><strong>True</strong>
<input type="radio" name="control">False
</div>
</li>
<li>
<div class="configuration-left">
<div></div>
<div><b>FTP IP地址:</b></div>
</div>
<div class="configuration-right">
<input type="text" id="ipname" value="">
<span class=""></span>
</div>
</li>
<li>
<div class="configuration-left">
<div>*</div>
<div><b>转存模式:</b></div>
</div>
<div class="configuration-right">
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>
</div>
</li>
</ul>
<div class="buttongroup">
<button>确定</button> <button>取消</button>
</div> 
</form>
</div>

 

css：

.configuration form{
width: 100%;
}
.configuration form ul{
margin-bottom: 20px;
}
.configuration ul,.configuration ul>li{
width: 100%;
list-style: none;
overflow: hidden;
margin:0;
padding:0;
}
.configuration{
width: 100%;
overflow: hidden;
}
.configuration-left{
width: 20%;
height: 40px;
line-height: 40px;
float: left;
overflow: hidden;
}
.configuration-left>div{
float:left;
}
.configuration-left>div:nth-of-type(1){
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
color:red; 
}
.configuration-right{
width:80%;
height: 40px;
float: right;
line-height: 40px;
}
.configuration-right>input[type="radio"]{
width: auto;height: auto;
}
.configuration-right>input,.configuration-right>select{
margin-left: 20px;
margin-right: 5px;
height: 25px;
width: 200px;
}
.configuration-right>span{
visibility:hidden;
}
.configuration-right>.right{
display:inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius:50%;
background: #40A740;
color: #fff;
}
.configuration-right>.wrong{
display:inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius:50%;
background:#F73636;
color: #fff;
}
.buttongroup{
width:100%;
margin-top: 20px;
padding-left:220px;
}
.buttongroup>button{
padding-left: 20px;
padding-right:20px;
margin-left: 10px;
margin-right: 10px;
}

 

js:

$(function(){
$("#ipname").blur(change).keydown(change);
function change(e){
var _val = $(this).val();
if( e.type == "blur" || e.keyCode == 13 ){
e.preventDefault();
var reg = /(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}/;
var res = reg.exec(_val);
if( res != null && _val == res[0]) {
$(this).siblings().css("visibility","visible").attr("class","right").text('✔');
} else {
$(this).siblings().css("visibility","visible").attr("class","wrong").text('✘');
}
}
}
})

 

实现效果：

 

 

本文为本人用来记录自己做的一些东西，如有不对的地方，请见谅。    你是我支撑下去的理由