<!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=utf-8" />
<title>注册页面</title>
<link rel="stylesheet" href="css/area.css" />
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#dd {
width: 50%;
height: 800px;
float: left;
background-color: #F90;
}
#dd2 {
width: 50%;
height: 800px;
float: right;
background-color: #FC9;
}
form {
margin: 0px auto;
width: 80%
}
#sexInfo {
z-index: 1000;
position: absolute;
width: 150px;
height: 150px;
background-color: pink;
left: 10%;
top: 500px;
display: none;
}
</style>
<script src="../20170717/js/jquery-3.3.1.js"></script>
<script src="../20170717/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/area.js" type="text/javascript"></script>
<script src="js/areaData_min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var b1=false;
var num=Math.floor(Math.random()*8999+1000);
$("#randomNo").html("<font color='red'>"+num+"</font>");
$("#b1").click(function() {
if(b1==false){
$("#agree").removeAttr("disabled");
b1=true;
}else{
$("#agree").attr("disabled","disabled");
b1=false;
}
});
$("#name").focus(function(){
if($("#name").val().length==0)
$("#nameInfo").html("<font color='red'><b>用户名不能小于6位</b>");
});
$("#name").keyup(function(e) {
if($("#name").val().length<6){
$("#nameInfo").html("<font color='red'><b>用户名不能小于6位</b>");
}else{
$("#nameInfo").html(" ");
}
});
$("#pwd").focus(function(){
if($("#pwd").val().length==0)
$("#pwdInfo").html("<font color='red'><b>密码不能小于6位</b>");
});
$("#pwd").keyup(function(e) {
if($("#pwd").val().length<6){
$("#pwdInfo").html("<font color='red'><b>密码不能小于6位</b>");
}else{
$("#pwdInfo").html(" ");
}
});
$("#pwdA").focus(function(){
if($("#pwdA").val().length==0)
$("#pwdAInfo").html("<font color='red'><b>两次密码必须一致</b>");
});
$("#pwdA").keyup(function() {
if($("#pwdA").val()!=$("#pwd").val()){
$("#pwdAInfo").html("<font color='red'><b>两次密码必须一致</b>");
}else{
$("#pwdAInfo").html(" ");
}
});
//验证码
$("#inputNo").keyup(function() {
if($("#inputNo").val()==num){
$("#inputInfo").html("<font color='blue'><b>\验证码输入正确</b>");
}else{
$("#inputInfo").html("<font color='red'><b>\验证码输入错误</b>");
}
});
$("#agree").submit(function(){
if($("#name").val().length>=6&&$("#pwd").val().length>=6&&$("#pwd").val()==$("#pwdA").val()){
alert("注册成功");
}else{
alert("注册失败");
}
});
//鼠标滑动触发图片效果
$("#p1").mouseover(function() {
$("#sexInfo").css("display","block");
$("#sexInfo").css("background-image","url(image/female2.jpg)");
});
$("#p1").mouseout(function() {
$("#sexInfo").css("display","none");
});
$("#p2").mouseover(function() {
$("#sexInfo").css("display","block");
$("#sexInfo").css("background-image","url(image/male2.jpg)");
});
$("#p2").mouseout(function() {
$("#sexInfo").css("display","none");
});
});
</script>
</head>
<body>
<div id="sexInfo"></div>
<iframe name="" src="iframe/top.html" width="100%" height="300px" frameborder="0"></iframe>
<hr>
<div id="dd">
<!--表单嵌套表格-->
<form action="index3.html" method="post">
<table border="0">
<tr>
<td align="center" colspan="2"><h2>新 用 户 注 册</h2></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" id="name" placeholder="请输入您的用户名"/></td>
</tr>
<tr>
<td colspan="2" id="nameInfo"> </td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd" placeholder="请输入密码"/></td>
</tr>
<tr>
<td colspan="2" id="pwdInfo"> </td>
</tr>
<tr>
<td>再次输入密码:</td>
<td><input type="password" id="pwdA" placeholder="请再次输入密码"/></td>
</tr>
<tr>
<td colspan="2" id="pwdAInfo"> </td>
</tr>
<tr>
<td>请选择您的性别：</td>
</tr>
<tr>
<td><img src="image/female1.jpg" id="p1">
<input type="radio" value="男" /></td>
<td><img src="image/male1.jpg" id="p2">
<input type="radio" value="女" />
</td>
</tr>
<tr>
<td>请选择注册网站的目的：</td>
<td> 购物
<input type="checkbox" value="购物" />
消费
<input type="checkbox" value="消费" />
空虚
<input type="checkbox" value="空虚" />
</td>
</tr>
<tr>
<td>请选择您的职业：</td>
<td><select>
<option>--请选择--</option>
<option value="IT">互联网行业</option>
<option value="doctor">医生</option>
<option value="build">建筑行业</option>
<option value="student">学生</option>
</select></td>
</tr>
<tr>
<td>请选择您的所在地:</td>
<td>
<div id="wrap">
<select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');">
</select>
<select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');">
</select>
<span id="seachdistrict_div">
<select id="seachdistrict" name="seachdistrict">
</select>
</span>
</div>
</td>
<td colspan="2" > </td>
</tr>
<tr>
<td>请输入验证码:<font id="randomNo"></font></td>
<td><input type="text" id="inputNo" placeholder="请输入左侧数字："/></td>
</tr>
<tr>
<td colspan="2" id="inputInfo"> </td>
</tr>
<tr>
<td><input type="submit" value="确定" id="agree" disabled="disabled"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</div>
<div id="dd2">
<h1>注册用户需要履行的条约</h1>
<textarea cols="50" rows="25" readonly="true">
请仔细阅读下面的协议，只有接受协议才能继续进行注册。
1． 服务条款的确认和接纳
**公共服务平台用户服务的所有权和运作权归珠海市生产力促进中心中心拥有。**公共服务平台所提供的服务将按照有关章程、服务条款和操作规则严格执行。用户通过注册程序点击“我同意” 按钮，即表示用户与**公共服务平台达成协议并接受所有的服务条款。
2. 用户同意：
1)提供及时、详尽及准确的个人资料。
2)不断更新注册资料，符合及时、详尽、准确的要求。所有原始键入的资料将引用为注册资料。
3)用户同意遵守《中华人民共和国保守国家秘密法》、《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》等有关计算机及互联网规定的法律和法规、实施办法。在任何情况下，珠海市科技创新公共服务平台合理地认为用户的行为可能违反上述法律、法规,服务平台可以在任何时候，不经事先通知终止向该用户提供服务。用户应了解国际互联网的无国界性，应特别注意遵守当地所有有关的法律和法规。
</textarea>
<br>
<input type="checkbox" id="b1"/>
确认同意上述条约 <br>
</div>
<iframe name="" src="iframe/buttom.html" width="100%" height="200px" frameborder="0"></iframe>
</body>
</html>
省市区三联动以及验证码部分可找网上开源代码。
扫一扫
3052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
