<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
<meta name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<title>手机号码归属地查询</title>
<style type=
"text/css"
>
*{margin: 0;padding: 0;border: 0;}
body{font-family: 微软雅黑;width: 100%;background-color: #f8f8f8}
form input{
outline: none;
font-family: 微软雅黑;
font-size: 16px;
transition: all .5s ease;
}
form input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
p{text-align: center;padding: 10 0 0 0;}
.query_phone{
width: 90%;
height: 40px;
padding-left: 5%;
}
.submit{
width: 90%;
height: 50px;
color: #fff;
font-size: 16px;
background-color: rgb(97,178,220);
transition: all .5s ease;
font-family: 微软雅黑;
}
.submit:hover{
background-color: rgb(97,178,255);
}
:-moz-placeholder {
opacity:.5;
}
::-moz-placeholder {
opacity:.5;
}
input:-ms-input-placeholder{
opacity:.5;
}
input::-webkit-input-placeholder{
opacity:.5;
}
input::-webkit-input-placeholder {
}
input:-moz-placeholder {
}
input::-moz-placeholder {
}
input:-ms-input-placeholder {
}
</style>
<script type=
"text/javascript"
>
function
checkMobile(){
var
sMobile = document.mobileform.phone.value.trim();
if
(!(/^1[3|4|5|6|7|8|9][0-9]{5,9}$/.test(sMobile))){
alert(
"不是完整的11位手机号或者正确的手机号前七位"
);
document.mobileform.phone.focus();
return
false;
}
}
</script>
</head>
<body>
<form
class
=
"phone_check_form"
name=
"mobileform"
method=
"get"
action=
"query_phone.php"
onsubmit=
"return checkMobile()"
;>
<p><input
class
=
"query_phone"
name=
"phone"
type=
"text"
/ required=
""
placeholder=
"13414503051"
maxlength=
"11"
></p>
<p><input
class
=
"submit"
name=
"submit"
type=
"submit"
value=
"查询"
/></p>
<p align=
"center"
style=
"font-size: 12px;margin-top: 50px;"
>by Vegeta</p>
</form>
</body>
</html>