JS实现返利网注册系统（网页数据验证）

最新推荐文章于 2024-05-18 21:57:13 发布

W少年没有乌托邦

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量127

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/mr_wangzu/article/details/134934777

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主代码

<!DOCTYPE HTML
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>返利网注册</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

			}

			input,
			select,
			textarea {
				font-size: 1em;
				margin: 0;
				color: #000;
				font-family: tahoma, arial, simsun, sans-serif;

			}

			table {
				border-collapse: collapse;
				border-spacing: 0;

			}

			body {
				font-size: 14px;

			}

			#formbox {
				padding: 20px;
				border: solid 1px #D1D1D1;
				margin: 20px auto;
				width: 880px;

			}

			#formbox h3 {
				font-size: 16px;
				height: 32px;
				color: #3366cc;
				font-weight: 800;
				border-bottom: solid 1px #D1D1D1;
				margin: 0 0 20px 0;
				padding: 0 10px;

			}

			/* registerform */
			.registerform .need {
				width: 10px;
				color: #b20202;

			}

			.registerform td {
				padding: 5px 0;
				vertical-align: top;
				text-align: left;

			}

			.registerform .inputxt,
			.registerform textarea {
				border: 1px solid #a5aeb6;
				width: 196px;
				padding: 2px;

			}

			.registerform textarea {
				height: 75px;

			}

			.registerform label {
				margin: 0 26px 0 10px;

			}

			.registerform .tip {
				line-height: 20px;
				color: #5f6a72;

			}

			.registerform select {
				width: 202px;

			}

			.registerformalter select {
				width: 124px;

			}

			/*==========以下部分是必须的===========*/
			.Validform_checktip {
				margin-left: 8px;
				line-height: 20px;
				height: 20px;
				overflow: hidden;
				color: #999;
				font-size: 12px;

			}

			.Validform_right {
				color: #71b83d;
				padding-left: 20px;
				background: url(images/right.png) no-repeat left center;

			}

			.Validform_wrong {
				color: red;
				padding-left: 20px;
				white-space: nowrap;
				background: url(images/error.png) no-repeat left center;

			}

			.Validform_loading {
				padding-left: 20px;
				background: url(images/onLoad.gif) no-repeat left center;

			}

			.Validform_error {
				background-color: #ffe7e7;

			}

			#Validform_msg {
				color: #7d8289;
				font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
				width: 280px;
				background: #fff;
				position: absolute;
				top: 0px;
				right: 50px;
				z-index: 99999;
				display: none;
				filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
				-webkit-box-shadow: 2px 2px 3px #aaa;
				-moz-box-shadow: 2px 2px 3px #aaa;

			}

			#Validform_msg .iframe {
				position: absolute;
				left: 0px;
				top: -1px;
				z-index: -1;

			}

			#Validform_msg .Validform_title {
				line-height: 25px;
				height: 25px;
				text-align: left;
				font-weight: bold;
				padding: 0 8px;
				color: #fff;
				position: relative;
				background-color: #000;

			}

			#Validform_msg a.Validform_close:link,
			#Validform_msg a.Validform_close:visited {
				line-height: 22px;
				position: absolute;
				right: 8px;
				top: 0px;
				color: #fff;
				text-decoration: none;

			}

			#Validform_msg a.Validform_close:hover {
				color: #cc0;

			}

			#Validform_msg .Validform_info {
				padding: 8px;
				border: 1px solid #000;
				border-top: none;
				text-align: left;

			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	</head>

	<body>

		<div id="formbox">
			<h3>返利网注册</h3>
			<form action="success.html" class="registerform"">
				<table width="100%" style="table-layout:fixed;">
					<tbody>
						<tr>
							<td style="width:10px;" class="need">*</td>
							<td style="width:70px;">用户名：</td>
							<td style="width:205px;">
								<input type="text" class="inputxt" name="txtName" id="txtName" />
							</td>
							<td>
								<div id="check_name" class="Validform_checktip">由字母、数字、下划线、点、减号组成的4-18位字符，以数字、字母开头或结尾
								</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>密码：</td>
							<td>
								<input type="password" class="inputxt" name="txtPwd" id="txtPwd" />
							</td>
							<td>
								<div id="check_pwd" class="Validform_checktip">英文字母和数字组成的4—10位字符</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>确认密码：</td>
							<td>
								<input type="password" class="inputxt" name="txtConfirmPwd" id="txtConfirmPwd" />
							</td>
							<td>
								<div id="check_confirmpwd" class="Validform_checktip">两次输入密码需一致</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>Email：</td>
							<td>
								<input type="text" name="txtEmail" id="txtEmail" class="inputxt" />
							</td>
							<td>
								<div id="check_email" class="Validform_checktip">
									请输入您常用的邮箱,如jzlg@tom.com或者jzlg@sina.com.cn</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>移动电话：</td>
							<td>
								<input type="text" class="inputxt" name="txtTel" id="txtTel" />
							</td>
							<td>
								<div id="check_tel" class="Validform_checktip">手机号由11位数字组成，且以13、15、18开头</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>性别：</td>
							<td>
								<input type="radio" class="pr1" name="gender" value="帅哥" /><label for="male">帅哥</label>
								<input type="radio" class="pr1" name="gender" value="美女" /><label for="female">美女</label>
							</td>
							<td>
								<div id="check_gender" class="Validform_checktip">性别必选一项</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>省份：</td>
							<td>
								<select id="province" name="province">
									<option value="--请选择省份--">--请选择省份--</option>
									<option value="湖北省">湖北省</option>
									<option value="江西省">江西省</option>
									<option value="海南省">海南省</option>
								</select>
							</td>
							<td>
								<div id="check_province" class="Validform_checktip">省份必选一项</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>购物网：</td>
							<td>
								<input type="checkbox" value="淘宝网" class="rt2" name="shoppingsite" /><label>淘宝网</label>
								<input type="checkbox" value="当当网" class="rt2"
									name="shoppingsite" /><label>当当网</label><br />
								<input type="checkbox" value="京东" class="rt2" name="shoppingsite" /><label>京东</label>
								<input type="checkbox" value="亚马逊" class="rt2"
									name="shoppingsite" /><label>亚马逊</label><br />
							</td>
							<td>
								<div id="check_shop" class="Validform_checktip">至少选择一项，可多选</div>
							</td>
						</tr>

						<tr>
							<td class="need">*</td>
							<td>个人介绍：</td>
							<td>
								<textarea name="personalIntroduction" rows="5" cols="30" id="jieshao"></textarea>
							</td>
							<td>
								<div id="check_textarea" class="Validform_checktip">必须填写个人介绍</div>
							</td>
						</tr>

						<tr>
							<td class="need"></td>
							<td></td>
							<td style="padding:10px 0 18px 0;" colspan="2">
								<input type="submit" value="提 交" / id="tijiao">
								<input type="reset" value="重 置" />
							</td>
						</tr>

					</tbody>
				</table>
			</form>
		</div>
		<script src="js/jquery-1.11.0.min.js">
		</script>
		<script>
			$(function() {
				var pd=false
				var pd1=false
				var pd2=false
				var pd3=false
				var pd4=false
				var pd5=false
				
				//账号
				$('#txtName').on('blur', function() {
					var txttext = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/
					if (txttext.test($('#txtName').val())) {

						$('#check_name').text('正确')
						pd=true
					} else {
						$('#check_name').text('请按要求填写')
						pd=false
					}

				})
				//密码
				$('#txtPwd').on('blur', function() {
					var mitext = /^[a-zA-Z0-9]{4,10}$/
					if (mitext.test($('#txtPwd').val())) {

						$('#check_pwd').text('正确')
						pd1=true
					} else {
						$('#check_pwd').text('请按要求填写')
						pd1=false
					}

				})
				//确认密码
				$('#txtConfirmPwd').on('blur', function() {
					if ($('#txtPwd').val() == $('#txtConfirmPwd').val()) {
						$('#check_confirmpwd').text('正确')
						pd2=true
					} else {
						$('#check_confirmpwd').text('请按要求填写')
						pd2=false
					}

				})
				//Email
				$('#txtEmail').on('blur', function() {
					var Email = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
					if (Email.test($('#txtEmail').val())) {

						$('#check_email').text('正确')
						pd3=true
					} else {
						$('#check_email').text('请按要求填写')
						pd3=false
					}

				})
				//电话
				$('#txtTel').on('blur', function() {
					var Email = /^(13|15|18)\d{9}$/
					if (Email.test($('#txtTel').val())) {

						$('#check_tel').text('正确')
						pd4=true
					} else {
						$('#check_tel').text('请按要求填写')
						pd4=false
					}

				})
				//电话
				$('#jieshao').on('blur', function() {

					if ($('#jieshao').val() == "") {
						$('#check_textarea').text('请按要求填写')
						pd5=false
					} else {
						$('#check_textarea').text('正确')
						pd5=true
					}

				})
				//提交
				$('#tijiao').on('click',function(){
					var pd= $('#province').val().length==3
					if ($('input[name=gender]:checked').length!=0 &&pd&&$('input[name=shoppingsite]:checked').length!=0&&pd&&pd1&&pd2&&pd3&&pd4&&pd5) {
						console.log('成功')
						return true
					} else{
							console.log('失败')
							return false
					}
				})
			})
		</script>
	</body>
</html>

跳转页面区域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ע���ɹ�</title>
</head>
<body>
<h1>ע���ɹ���</h1>
</body>
</html>