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('✘');
}
}
}
})

实现效果:

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

正则表达式判断ip地址的更多相关文章

  1. QT正则表达式---针对IP地址

    判断合法IP的QT正则表达式: bool IsIPaddress(QString ip) { QRegExp rx2("(//d+)(//.)(//d+)(//.)(//d+)(//.)(/ ...

  2. C# 正则表达式判断IP,URL等及其解释

    C# 正则表达式判断IP,URL等及其解释 判断IP格式方法: public static bool ValidateIPAddress(string ipAddress) { Regex valid ...

  3. C# 判断ip地址是否正确

    最后要用一方法判断ip地址是否正确,直接用.Net现成的类,方法如下: string ipStr="192.168.222.333"; IPAddress ip; if(IPAdd ...

  4. 正则表达式检测IP地址与端口号是否合法

    正则表达式检测IP地址与端口号是否合法,代码如下: 正则表达式检测IP地址 public static bool CheckAddress(string s) { bool isLegal = fal ...

  5. 使用正则表达式匹配IP地址

    IP地址分为4段,以点号分隔.要对IP地址进行匹配,首先要对其进行分析,分成如下部分,分别进行匹配:   第一步:地址分析,正则初判 1.0-9 \d 进行匹配 2.10-99 [1-9]\d 进行匹 ...

  6. js判断ip地址,子网掩码,网关的逻辑性检查

    因为要做静态地址配置的js校验,找了好多资料发现网上都是关于ip,mask的有效性检查,没有ip,submask,gateway的逻辑性判断,自己写下代码供需要的人参考. 普及下网关地址知识: 就是进 ...

  7. PHP判断ip地址是否合法

    1.获取真正ip地址 function get_ip(){ //判断服务器是否允许$_SERVER if(isset($_SERVER)){ if(isset($_SERVER[HTTP_X_FORW ...

  8. 判断IP地址是否在指定范围内的方法

    比如给定一个ip段:127.0.0.1 ~ 127.0.0.255,我们想判断一个给定的ip地址是否在此段内,可以先将ip地址转换成整数,然后整数比较大小就很容易了. 例如: 127.0.0.1 = ...

  9. python中利用正则表达式匹配ip地址

    现在有一道题目,要求利用python中re模块来匹配ip地址,我们应如何着手? 首先能想到的是ip地址是数字,正则表达式是如何匹配数字的呢? \d或[0-9] 对于这个问题,不要一下子上来就写匹配模式 ...

随机推荐

  1. eclipse 导入tomcat7源码

    导入tomcat的源码其实说简单也不简单,说不简单也简单,主要还是环境问题,中间花费了我很多时间,网上找了很多都没什么用,参考一些文章,然后自己慢慢摸索出来的. 环境:(1)jdk:jdk1.6.0_ ...

  2. jqery总结

  3. js便利关联数组 及数组定义方式 分类

    "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=& ...

  4. centos6.8安装superctl 后台管理工具

    下载安装python yum install python-setuptools 从官网下载supervisor包 https://pypi.python.org/pypi/supervisor 解压 ...

  5. 网站引导页flash动画跳转js脚本

    if (getCookie("guidance") == null) { document.cookie = "guidance=true"; window.l ...

  6. Python----文件的IO操作

    一.文件操作 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件 ...

  7. angular.js跨域post解决方案

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...

  8. Arpa's loud Owf and Mehrdad's evil plan

    Arpa's loud Owf and Mehrdad's evil plan time limit per test 1 second memory limit per test 256 megab ...

  9. mongodb 性能提高之利用索引, 待续

    > 10 , 用户无法忍受 >1s , 需要加装中提示 数据库对软件整体影响是不言而喻的, 那么使用 MOngoDB时 该如何提高数据库性能 第一: 索引, 相当于记忆法的 地点桩 1. ...

  10. LR11安装注意事项

    一.安装Microsoft Visual c++2005 sp1运行时组件,就会提示命令行选项语法错误,键入“命令/?”可获取帮肋信息 解决方法: 进入LoadRunner11下载\loadrunne ...