<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>手机端注册表单验证js代码</title>
<style>
html,
body {
margin: 0px;
height: 100%;
}
body {
background: #f1f1f1;
font-family: "Microsoft YaHei", "MicrosoftJhengHei", STHeiti, MingLiu;
}
.div_c_l {
float: left;
padding: 5px;
font-size: 15px;
font-weight: 500;
}
.div_c_l span {
line-height: 38px;
padding: 0 5px;
width: 60px;
}
.div_c_l img {
height: 30px;
margin: 2px;
padding: 0px 7px;
}
.div_c_r {
float: right;
padding: 5px;
width: calc(100% - 100px);
}
.div_c_r input {
border: 0px;
margin: 5px;
float: right;
line-height: 28px;
font-size: 15px;
text-align: right;
padding-right: 5px;
width: 100%;
outline: none;
text-align: left;
}
.div_c_r button {
width: 88px;
float: right;
background-color: #F2F2F2;
height: 28px;
padding: 4px 8px;
line-height: 20px;
font-size: 14px;
font-weight: 500;
margin: 5px 5px 0 0;
border: 1px solid #DBDBDB;
border-radius: 6px;
outline: none;
}
.div_f {
border-bottom: 1px solid #E8E8E8;
background-color: #fff;
}
.btn_1 {
border: none;
margin: 40px 6% 16px 6%;
width: 88%;
height: 1.8em;
background-color: #05a0e0;
border-radius: 4px;
font-size: 20px;
color: #FFFFFF;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.div_b_l {
float: left;
margin-left: 6%;
padding: 5px;
width: calc(44% - 10px);
}
.div_b_r {
float: right;
margin-right: 6%;
padding: 5px;
width: calc(44% - 10px);
text-align: right;
}
.span_b {
font-size: 16px;
font-weight: 500;
color: #000;
padding: 0 2px;
float: left;
}
.span_br {
font-size: 16px;
font-weight: 500;
color: #05a0e0;
float: left;
}
input[type=checkbox] {
visibility: hidden;
}
.checkboxforget {
top: 0px;
float: left;
width: 20px;
height: 20px;
background: #05a0e0;
margin: 0 5px 0 0;
border-radius: 100%;
position: relative;
}
.checkboxforget label {
display: block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
background: #fff;
}
.checkboxforget input[type=checkbox]:checked+label {
background: #05a0e0;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
}
.inp_radio {
float: left;
line-height: 48px;
}
input[type=radio] {
visibility: hidden;
}
.checkboxforget1 {
top: 13px;
float: left;
width: 20px;
height: 20px;
background: #AFAFAF;
margin: 0 5px 0 0;
border-radius: 100%;
position: relative;
/* -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(0,0,0,0.5);*/
}
.checkboxforget1 label {
display: block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
background: #fff;
/* -webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);*/
}
.checkboxforget1 input[type=radio]:checked+label {
background: #05a0e0;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
}
.red {
color: #ff6600;
display: inline-block;
}
</style>
</head>
<body sroll="no" onclick="onload">
<form name="form1" onsubmit="return checkreg()" action="homepage.html" method="post">
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span> 姓名</span>
</div>
<div class="div_c_r"><input type="text" style="width:calc(100% - 16px);" name="name" id="name" placeholder="请填写真实姓名">
<span style="float: right;margin-top: -30px;background:#fff" id="tish"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>密码</span>
</div>
<div class="div_c_r"><input type="password" style="width:calc(100% - 16px);" name="password" id="password" onkeydown="" value="" placeholder="6~20位数字、字符任意组合">
<span style="float: right;margin-top: -30px;background:#fff" id="ts"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">确认密码</span>
</div>
<div class="div_c_r"><input type="password" style="width:calc(100% - 16px);" name="passagain" id="Pwdagain" onkeydown="" value="" placeholder="请再次输入密码">
<span style="float: right;margin-top: -30px;background:#fff" id="tishi"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">手机号码</span>
</div>
<div class="div_c_r"><input type="tel" style="width:calc(100% - 16px);" id="phone" name="phone" onkeydown="" id="phone" value="" placeholder="请输入手机号码">
<span style="float: right;margin-top: -30px;background:#fff" id="tss"></span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">验证码</span>
</div>
<div class="div_c_r"><input style="float: right; text-align: center;font-size: 11px;padding: 4px 9px;width:calc(50% - 16px);background: #05a0e0;color: #fff;" id="dynamic" value="发送验证码" type="button" onclick="sendMessage(60)">
<input style="width:calc(50% - 10px);" type="tel" name="code" onblur="sub();" onkeydown="" id="code" placeholder="请输入验证码">
<span style="margin-top: -30px;background:#fff" id="tsi"></span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>性别</span>
</div>
<div class="div_c_r" style="padding: 0;">
<div style="margin-left: 28px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember1" name="sex" id="sex" value="0" checked />
<label for="Remember1"></label>
</div>
男
</div>
<div style="margin-left: 8px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember2" name="sex" id="sex" value="1" />
<label for="Remember2"></label>
</div>
女
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<button id="submit" class="btn_1">绑定</button>
</form>
<script type="text/javascript">
function checkreg() {
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if(document.form1.name.value == "") {
//alert("请输入您的用户名!");
document.getElementById("tish").innerHTML = "<font color='red'>请输入您的用户名!</font>";
form1.name.focus();
return false;
}
document.getElementById("tish").innerHTML = "<font color='green'>正确</font>";
// if (document.form1.User.value.length<4 || document.form1.User.value.length>15)
// {
// alert("用户名长度限制在4-15位!");
// form1.User.focus();
// return fals
