参考:
<html xmlns:v="urn:schemas-microsoft-com:vml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IP-like Input</title>
<style>
<!--
v\:* { behavior: url(#default#VML) }
div.IPDiv { background: #FFFFFF; width: 120; margin:0; font-family: Arial,Tahoma; font-size: 10pt; text-align: center; border-top: 2 ridge threedshadow; border-left: 2 ridge threedshadow; border-right: 2 inset threedhighlight; border-bottom: 2 inset threedhighlight }
input.IPInput { width: 24; margin:0; font-family: Arial,Tahoma; font-size: 10pt; text-align: center; border-width: 0 }-->
</style>
</head><body bgcolor=threedface>
<div id="alertInfoDiv" style="position: absolute; left:100; top:40; display:none">
<v:roundrect strokecolor="black" fillcolor="infobackground" style="position:relative;left:30;top:5;width:130px;height:40px;z-index:9">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
<v:textbox id="alertInfo" style="font-family:Arial,Tahoma;font-size:10pt;color:infotext;line-height:18px" inset="2px,2px,2px,2px"></v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-120;top:20;width:14px;height:10px;z-index:8">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-160;top:32;width:10px;height:8px;Z-index:7">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>
</div>
IP地址输入栏:
<div style="position: absolute; left: 50; top:115; text-align: center; vertical-align: middle;">
<script>
IPlikeInputStr = "";
IPlikeInputStr += '<div class="IPDiv">';
for (i=0;i<4;i++) {
IPlikeInputStr += '<input class="IPInput" name="IPInput'+i+'" type="text" size="3" maxlength="3" onkeypress="keyHandle()" onkeyup="checkInput()">'+((i==3) ? '' : '.');
}
IPlikeInputStr += '</div>';
document.write(IPlikeInputStr);
function keyHandle() {
if (event.keyCode<48||event.keyCode>57) {
event.returnValue = false;
}
}
function checkInput() {
if (event.srcElement.name=="IPInput0") {
if (event.srcElement.value==0&&event.srcElement.value.length==3) {
event.srcElement.value="1";
VMLAlert("请输入一个界于1和223之间的数值。",67);
//alert("请输入一个界于1和223之间的数值。");
event.srcElement.select();
}
if (event.srcElement.value>223) {
event.srcElement.value="223";
VMLAlert("请输入一个界于1和223之间的数值。",67);
//alert("请输入一个界于1和223之间的数值。");
event.srcElement.select();
}
}
else {
if (event.srcElement.value>255) {
event.srcElement.value="255";
var theSrcName = event.srcElement.name;
var theAlertPos = theSrcName=="IPInput1" ? 95 : (theSrcName=="IPInput2" ? 122 :150);
VMLAlert("请输入一个界于0和255之间的数值。",theAlertPos);
//alert("请输入一个界于0和255之间的数值。")
event.srcElement.select();
}
}
} function VMLAlert(alertText,alertPos) {
with (document.all) {
alertInfo.innerHTML = alertText;
alertInfoDiv.style.left = alertPos;
alertInfoDiv.style.display = "";
}
setTimeout('document.all.alertInfoDiv.style.display = "none"',3000);}
</script>
</div>
</body>
</html>
<html xmlns:v="urn:schemas-microsoft-com:vml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IP-like Input</title>
<style>
<!--
v\:* { behavior: url(#default#VML) }
div.IPDiv { background: #FFFFFF; width: 120; margin:0; font-family: Arial,Tahoma; font-size: 10pt; text-align: center; border-top: 2 ridge threedshadow; border-left: 2 ridge threedshadow; border-right: 2 inset threedhighlight; border-bottom: 2 inset threedhighlight }
input.IPInput { width: 24; margin:0; font-family: Arial,Tahoma; font-size: 10pt; text-align: center; border-width: 0 }-->
</style>
</head><body bgcolor=threedface>
<div id="alertInfoDiv" style="position: absolute; left:100; top:40; display:none">
<v:roundrect strokecolor="black" fillcolor="infobackground" style="position:relative;left:30;top:5;width:130px;height:40px;z-index:9">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
<v:textbox id="alertInfo" style="font-family:Arial,Tahoma;font-size:10pt;color:infotext;line-height:18px" inset="2px,2px,2px,2px"></v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-120;top:20;width:14px;height:10px;z-index:8">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-160;top:32;width:10px;height:8px;Z-index:7">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>
</div>
IP地址输入栏:
<div style="position: absolute; left: 50; top:115; text-align: center; vertical-align: middle;">
<script>
IPlikeInputStr = "";
IPlikeInputStr += '<div class="IPDiv">';
for (i=0;i<4;i++) {
IPlikeInputStr += '<input class="IPInput" name="IPInput'+i+'" type="text" size="3" maxlength="3" onkeypress="keyHandle()" onkeyup="checkInput()">'+((i==3) ? '' : '.');
}
IPlikeInputStr += '</div>';
document.write(IPlikeInputStr);
function keyHandle() {
if (event.keyCode<48||event.keyCode>57) {
event.returnValue = false;
}
}
function checkInput() {
if (event.srcElement.name=="IPInput0") {
if (event.srcElement.value==0&&event.srcElement.value.length==3) {
event.srcElement.value="1";
VMLAlert("请输入一个界于1和223之间的数值。",67);
//alert("请输入一个界于1和223之间的数值。");
event.srcElement.select();
}
if (event.srcElement.value>223) {
event.srcElement.value="223";
VMLAlert("请输入一个界于1和223之间的数值。",67);
//alert("请输入一个界于1和223之间的数值。");
event.srcElement.select();
}
}
else {
if (event.srcElement.value>255) {
event.srcElement.value="255";
var theSrcName = event.srcElement.name;
var theAlertPos = theSrcName=="IPInput1" ? 95 : (theSrcName=="IPInput2" ? 122 :150);
VMLAlert("请输入一个界于0和255之间的数值。",theAlertPos);
//alert("请输入一个界于0和255之间的数值。")
event.srcElement.select();
}
}
} function VMLAlert(alertText,alertPos) {
with (document.all) {
alertInfo.innerHTML = alertText;
alertInfoDiv.style.left = alertPos;
alertInfoDiv.style.display = "";
}
setTimeout('document.all.alertInfoDiv.style.display = "none"',3000);}
</script>
</div>
</body>
</html>
<button onclick="alert(test())">test</button>
<script>
function test(){
var str=ip.value;
re=/^[\d]{1,3}\.[\d]{1,3}\.[\d]{1,3}\.[\d]{1,3}$/;
if(!re.test(str))
return false;
var arr = str.split(".");
for(var i=0; i<arr.length;i++)
if( parseInt(arr[i],10)>255) return false;
return true;
}
</script>
function testIp(s){
if(!/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(s))return false;
for(var i=1; i<=4; i++){
if(eval("parseInt(RegExp.$"+i+")>255"))return false;
}
return true;
}
s = "192.168.16.256";
alert(testIp(s));
</script>
<script language="JavaScript">
<!--function x()
{
var m=0;
var n=document.iform.itext.value;
var k=new Array();
var p1=new Array();
k[0]=0;
var l=new Array();
for(var i=0;i<n.length;i++)
{
if(n.substring(i,i+1)==".")
{
m++;
k[m]=i;
if(m==3)
{
var len=n.substring(k[m]+1);
k[m+1]=len.length;
}
}
}
if(m!=3)
{alert("error data");}
else
{
for(var j=0;j<=3;j++)
{
p1[j]=parseInt(n.substring(k[j],k[j+1]));
k[j+1]++;
for(var u=0;u<4;u++)
{
if(p1[u]>255)
{alert("error");return false;}
}
if(isNaN(p1[u]))
{
alert("not number");
return false;
}
}
}
}
-->
</script>
<BODY>
<form name="iform">
<input type="text" name="itext">
<input type="button" name="ibutton" onclick="x()">
</form>
</BODY>
</HTML>
</head><body>
<input type="text" value="" id="ipbox" size="20">
<input type="button" value="Check" onclick="check(ipbox.value)">
<script>
function check(str)
{
if(str!="")
{
var re = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/
var num = 0
var tempnum = ""
if(re.exec(str))
{
for(i=1;i<5;i++)
{
num = parseInt(eval("RegExp.$"+i))
tempnum = eval("RegExp.$"+i)
if(num<0||num>255)
{
alert("第 "+i+" 个" + tempnum + "超出 0--255的范围")
return;
}
else
{
if(num.toString()!=tempnum)
{
alert("第 "+i+" 个" + tempnum + "数字书写有问题")
return;
}
}
}
alert("符合要求")
}
else
{
alert("格式错误")
}
}
else
{
alert("请输入IP地址")
}
}
</script>
</body></html>
<script language=javascript>
checkform()
{
var arytemp,str,counter;
str=form1.txt1.value;
arytemp=str.split(".");
for(counter=0;counter<arytemp.length;counter++)
{
if(parseInt(arytemp[i],10)>255 || parseInt(arytemp[i],10)<0)
{
alert("Input error!!!");
return false;
}
}
alert("Input success!!!");
}
</script>
//...<form name="form1" action="">
<input type="text" name="txt1">
<input type="button" value="确定" onclick="checkform()">
</form>
<script>
function test()
{
try
{
re=/([^.]{1,})\.([^.]{1,})\.([^.]{1,})\.([^.]{1,})/
haha=re.exec(ip.value)
if((haha[1]>255)||(haha[1].length>3))
{
alert("第1段出错")
}
else if((haha[2]>255)||(haha[2].length>3))
{
alert("第2段出错")
}
else if((haha[3]>255)||(haha[3].length>3))
{
alert("第3段出错")
}
else if((haha[4]>255)||(haha[4].length>3))
{
alert("第4段出错")
}
else alert("正确!")
}
catch(e)
{
alert("格式输入错误!")
}
}
</script>
<input id=ip type=text value="192.168.100.26">
<input type="submit" name="Submit" value="提交" onclick="test()">