jQuery腾讯云诊断域名表单验证特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery腾讯云诊断域名表单验证特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style-index.css"> 
<script src="jquery-2.1.0.min.js"></script>
<title>jQuery腾讯云诊断域名表单验证特效</title>
</head>
<body class="mobileLayout">
	<div class="main">
<div class="search-bar">
	<div class="search-sort">域名</div>
	<input type="url" class="search-ipt" placeholder="请输入域名" id="domain">
	<button type="button" class="search-go" onclick="startCheck()">开始拨测</button>
</div>
<div class="links">
	<div class="list">
		<div class="item">
			<h2><a href="#">诊断APP</a></h2>
			<p>腾讯云诊断APP，帮助用户深度诊断网络</p>
		</div>
		<div class="item">
			<h2><a href="#">诊断页面</a></h2>
			<p>轻量级的拨测页面，点击页面即可自助诊断。</p>
		</div>
		<div class="item">
			<h2><a href="#">页面监控</a></h2>
			<p>实时监控，用户网页的打开延时</p>
		</div>
		<div class="item">
			<h2><a href="#">抓包APP</a></h2>
			<p>能够准确抓取app当前界面中的http请求，第一时间定位到有问题的请求</p>
		</div>
	</div>
</div>
<script>
function isDomain(str_url){ 
		var strRegex = "([0-9a-z_!~*'()-]+\.)*" // 域名- www.  
		+ "([0-9a-z][0-9a-z-]{0,61})?([0-9a-z]\." // 二级域名  
		+ "[a-z]{2,6})"  ; 
		var re=new RegExp(strRegex);  
		if (re.test(str_url)){ 
			return (true);  
		}else{  
			return (false);  
		} 
} 

function startCheck()
{
	var domainName = $("#domain").val();
	if(isDomain(domainName))
	{
		window.location.href="#"+domainName;
	}
	else
	{
		alert("请输入正确的域名");
	}
}

</script>
</div>
</body>
</html>

CSS代码(style-index.css):

@charset "utf-8";/* 銉兂銉斻兗銈?*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#FFF;text-decoration:none;}
a:hover{text-decoration:underline;}
input,textarea,button{font-family:'helvetica neue','hiragino sans gb','tahoma','microsoft yahei ui','microsoft yahei','simsun','sans-serif';}
body{background:url("../img/bg.jpg") #2eb5e8 center top no-repeat;background-size:cover;color:#FFF;font-size:14px;font-family:'helvetica neue','hiragino sans gb','tahoma','microsoft yahei ui','microsoft yahei','simsun','sans-serif';-webkit-font-smoothing:antialiased;}
.toolbar{height:42px;background-color:#353535;overflow:hidden;}
.toolbar .right{float:right;padding-top:13px;padding-right:25px;}
.toolbar .right a{margin-left:30px;}
.main{max-width:800px;margin:0 auto;padding-top:90px;}
.main h1{background-image:url("../img/logo.png");width:243px;height:36px;margin:0 auto;font-size:1px;line-height:99;overflow:hidden;}
.main .search-bar{max-width:800px;margin:49px auto 0;overflow:hidden;position:relative;}
.main .search-bar .search-sort{float:left;width:7.5%;min-width:3em;height:42px;background-color:#D1ECF6;text-align:center;line-height:42px;color:#434343;}
.main .search-bar .search-ipt{float:left;width:68.75%;height:42px;background-color:#FFF;font-size:14px;border-width:0;border-left:#CACACA solid 1px;line-height:42px;color:#434343;padding:0 0 0 9px;}
.main .search-bar .search-go{position:absolute;top:0;right:0;width:19.75%;min-width:5em;height:42px;background-color:#20B5E8;font-size:14px;border:#FFF solid 1px;color:#FFF;cursor:pointer;}
.main .links{overflow:hidden;max-width:800px;margin:97px auto;}
.main .links .list{overflow:hidden;width:860px;}
.main .links .list .item{float:left;width:368px;height:168px;border:#FFF solid 1px;margin:0 60px 60px 0;text-align:center;}
.main .links .list .item h2{font-size:24px;margin:60px 0 8px;}
.foot{height:50px;line-height:50px;background-color:#353535;color:#7C7C7C;text-align:center;position:fixed;bottom:0;width:100%;}
@media (max-device-width:800px){.main .search-bar{margin:49px 3% 0;}
.main .search-bar .search-go{right:0.95%;}
.main .links .list{width:auto;margin:0 2%;}
.main .links .list .item{width:47%;margin:0 1% 1%;}
.foot{position:static;}
}
@media (max-device-width:640px){.main{padding-top:20px;}
.main .search-bar{margin-top:20px;}
.main .links .list .item h2{margin-top:47px;}
.main .links .list .item p{line-height:1.6;padding:0 10px;}
.main .links{margin-top:20px;margin-bottom:20px;}
}

附件:下载该文件资源,减少时间成本(增值服务)