利用js实现手机注册表单验证代码



19 74 25



特效描述:利用js实现 手机注册 表单验证代码,利用js实现手机注册表单验证代码

代码结构

1. HTML代码

<!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></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 false;
		// }
		if(document.form1.password.value == "") {
			//alert("请输入密码!");
			document.getElementById("ts").innerHTML = "<font color='red'>请输入密码</font>";
			form1.password.focus();
			return false;
		}
		if(document.form1.password.value.length < 6 || document.form1.password.value.length > 20) {
			//alert("密码长度限制在6-20位!");
			document.getElementById("ts").innerHTML = "<font color='red'>密码长度限制在6-20位!</font>";
			form1.password.focus();
			return false;
		}
		document.getElementById("ts").innerHTML = "<font color='green'>正确</font>";
		if(document.form1.password.value != document.form1.Pwdagain.value) {
			document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
			form1.password.focus();
			return false;
		}
		document.getElementById("tishi").innerHTML = "<font color='green'>正确</font>";
		//   alert("注册成功!");
		// location.href="http://2016cn08.kobesoft.com.cn/index.php/weixin/page/login"; 
		if(!myreg.test(document.form1.phone.value)) {
			document.getElementById("tss").innerHTML = "<font color='red'>手机号码错误</font>";
			form1.password.focus();
			return false;
		}
		document.getElementById("tss").innerHTML = "<font color='green'>正确</font>";
		if(document.form1.code.value == "") {
			 document.getElementById("tsi").innerHTML = "<font color='red'>验证码不能为空</font>";
			form1.code.focus(); 
			return false;
		}
		document.getElementById("tsi").innerHTML = "<font color='green'>正确</font>";
		location.href="homepage.html";
	}
	function sendMessage(t) {
		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if(!myreg.test(document.form1.phone.value)) 
		{
		 alert('请输入有效的手机号码!'); 
		  return false; 
		  } //
		document.form1.dynamic.disabled = true;
		for(i = 1; i <= t; i++) {
			window.setTimeout("update_p(" + i + "," + t + ")", i * 1000);
		}
	}
	function update_p(num, t) {
		if(num == t) {
			document.form1.dynamic.value = " 重新发送 ";
			document.form1.dynamic.disabled = false;
		} 
		else {
			printnr = t - num;
			document.form1.dynamic.value = " (" + printnr + ")秒后重发";
		}
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 文本框 text文本框 注册框 验证码 表单验证 表单验证插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到