<!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 href="https://bbs.csdn.net/topics/css/global.css" type="text/css" rel="stylesheet" />
<link href="https://bbs.csdn.net/topics/css/login.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function changeBtn(){ //改變登錄按鈕的樣式
var btns=document.getElementsByName("btnLogin");
for(var i=0;i<btns.length;i++){
btns[i].onmouseover=function(){
this.src="https://img.uj5u.com/2020/09/24/129505240556171.jpg";
}
btns[i].onmouseout=function(){
this.src="https://img.uj5u.com/2020/09/24/129505240556172.jpg";
}
}
}
function changeRegBtn() { //改變注冊按鈕的樣式
var btns = document.getElementsByName("btnReg");
for (var i = 0; i < btns.length; i++) {
btns[i].onmouseover = function () {
this.src = "images/reg_over.jpg";
}
btns[i].onmouseout = function () {
this.src = "images/register.jpg";
}
}
}
function setTab(id){ //注冊的選項卡切換
if(id==1){
document.getElementById("emailreg").style.display="block";
document.getElementById("phonereg").style.display="none";
document.getElementById("one1").className="current";
document.getElementById("one2").className="";
}
if(id==2){
document.getElementById("emailreg").style.display="none";
document.getElementById("phonereg").style.display="block";
document.getElementById("one2").className="current";
document.getElementById("one1").className="";
}
}
function setLogTab(id) { //登錄的選項卡切換
if (id == 1) {
document.getElementById("email").style.display = "block";
document.getElementById("phone").style.display = "none";
document.getElementById("logone1").className = "current";
document.getElementById("logone2").className = "";
}
if (id == 2) {
document.getElementById("email").style.display = "none";
document.getElementById("phone").style.display = "block";
document.getElementById("logone2").className = "current";
document.getElementById("logone1").className = "";
}
}
var citys=new Array();
citys["北京"]=["海淀","門頭","房山","大興","順義"];
citys["上海"]=["黃浦","盧灣","徐匯","長寧","虹口","寶山"];
citys["天津"]=["和平","東麗","河東","河西","塘沽","大港","靜海"];
citys["黑龍江"]=["哈爾濱","齊齊哈爾","牡丹江","佳木斯","大慶","綏化"];
citys["湖北"]=["武漢","宜昌","荊州","襄樊","黃石","荊門","十堰","孝感"];
function initData(){
var provinceSel=document.getElementById("selProvince");
for(var index in citys){
var option=document.createElement("option");
option.text=index;
option.value=https://bbs.csdn.net/topics/index;
provinceSel.options.add(option);
}
//初始化"北京"的市
var citySel=document.getElementById("selCity");
for(var index in citys["北京"]){
var option=document.createElement("option");
option.text=citys["北京"][index];
option.value=https://bbs.csdn.net/topics/citys["北京"][index];
citySel.options.add(option);
}
}
function fillCity(){
var citySel=document.getElementById("selCity");
citySel.options.length=0;
var currentProvince=document.getElementById("selProvince").value;
for(var index in citys[currentProvince]){
var option=document.createElement("option");
option.text=citys[currentProvince][index];
option.value=https://bbs.csdn.net/topics/citys[currentProvince][index];
citySel.options.add(option);
}
}
function $(id){
return document.getElementById(id);
}
function lightTxt(obj){
obj.style.borderColor="red";
}
function checkForm(){
if(checkEmail()&&checkName()&&checkPwd()&&checkConfrim()){
return true;
}
return false;
}
jQuery(function () {
jQuery("#userEmail").focus(function () { // 輸入郵箱的文本框獲得滑鼠焦點
var txt_value = jQuery(this).val(); // 得到當前文本框的值
if (txt_value == "[email protected]") {
jQuery(this).val(""); // 如果符合條件，則清空文本框內容
}
});
jQuery("#userEmail").blur(function () {// 文本框失去滑鼠焦點
var txt_value = jQuery(this).val(); // 得到當前文本框的值
if (txt_value == "") {
jQuery(this).val("[email protected]");// 如果符合條件，則設定內容
}
});
});
</script>
</head>
<body onload="changeBtn(),changeRegBtn(),initData()">
<iframe src="https://bbs.csdn.net/topics/head.html" width="100%" height="104" scrolling="no" frameborder="0"></iframe>
<div id="middle">
<div id="allnav">
<div id="nav">
<ul>
<!--組織一級選單-->
<li class="menuList"><a href="https://bbs.csdn.net/topics/#" class="category">全部商品分類</a>
<ul>
<li><a href="https://bbs.csdn.net/topics/#">美食</a></li>
<li><a href="https://bbs.csdn.net/topics/#">旅游</a></li>
<li><a href="https://bbs.csdn.net/topics/#">酒店</a></li>
<li><a href="https://bbs.csdn.net/topics/#">電影</a></li>
<li><a href="https://bbs.csdn.net/topics/#">KTV</a></li>
<li><a href="https://bbs.csdn.net/topics/#">時尚</a></li>
<li><a href="https://bbs.csdn.net/topics/#">生活服務</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">首頁</a></li>
<li><a href="https://bbs.csdn.net/topics/#">團購</a></li>
<li><a href="https://bbs.csdn.net/topics/#">美食</a></li>
<li><a href="https://bbs.csdn.net/topics/#">電影</a></li>
<li><a href="https://bbs.csdn.net/topics/#">KTV</a></li>
<li><a href="https://bbs.csdn.net/topics/#">酒店訂票</a></li>
<li><a href="https://bbs.csdn.net/topics/#">購物</a></li>
<li><a href="https://bbs.csdn.net/topics/#">品牌特賣</a></li>
</ul>
</div>
</div>
<!--導航結束-->
<div id="content">
<div id="register">
<form action="register_success.html" onsubmit="return checkForm()" >
<fieldset>
<legend>注冊新用戶</legend>
<ul>
<li class="current" id="one1" onclick="setTab(1)">郵箱注冊</li>
<li id="one2" onclick="setTab(2)">手機注冊</li>
</ul>
<div class="box">
<div id="emailreg">
<p>
<label>郵箱：</label>
<input name="" type="text" class="txt" id="txtEmail" onblur="checkEmail()" onfocus="lightTxt(this)"/>
<span id="spanEmail">推薦使用qq郵箱</span> </p>
<p>
<label for="userName" accesskey="n">用戶名：</label>
<input name="" type="text" class="txt" id="txtName" onblur="checkName()" onfocus="lightTxt(this)"/>
<span id="spanName">4-16字符，不能包含數字</span> </p>
<p>
<label>創建密碼：</label>
<input name="" type="password" class="txt" id="txtPwd" onblur="checkPwd()" onfocus="lightTxt(this)"/>
<span id="spanPwd">6-32位字符</span> </p>
<p>
<label>確認密碼：</label>
<input name="" type="password" class="txt" id="txtConfirm" onblur="checkConfirm()" onfocus="lightTxt(this)"/>
<span id="spanConfirm">請再次輸入密碼</span> </p>
<p>
<label>所在城市：</label>
<select class="txt" id="selProvince" onchange="fillCity()">
</select>
<select class="txt" id="selCity">
</select>
</p>
<p>
<label>驗證碼：</label>
<input name="" type="text" class="txt check" />
<img src="https://img.uj5u.com/2020/09/24/129505240556173.gif" style="vertical-align:bottom" /> </p>
<p>
<input type="image" class="btn" src="https://img.uj5u.com/2020/09/24/129505240556174.jpg" name="btnReg" />
<a href="https://bbs.csdn.net/topics/#">《美淘網用戶協議》</a> </p>
</div>
<!--通過email注冊-->
<div id="phonereg" style="display:none">
<p>
<label>電話：</label>
<input name="" type="text" class="txt" />
<span>用于登錄，找回密碼，不會公開</span> </p>
<p>
<label>短信驗證碼：</label>
<input name="" type="text" class="txt" />
<span>請輸入手機收到的驗證碼</span> </p>
<p>
<label>創建密碼：</label>
<input name="" type="password" class="txt" />
<span>6-32字符</span> </p>
<p>
<label>確認密碼：</label>
<input name="" type="password" class="txt" />
<span>請再次輸入密碼</span> </p>
<p>
<input type="image" class="btn" src="https://img.uj5u.com/2020/09/24/129505240556174.jpg" name="btnReg" />
<a href="https://bbs.csdn.net/topics/#">《美淘網用戶協議》</a> </p>
</div>
<!--通過電話注冊-->
</div>
</fieldset>
</form>
</div>
<div id="login">
<form>
<fieldset>
<legend>登錄MEITAO.COM</legend>
<ul>
<li id="logone1" onclick=" setLogTab(1)" class="current">郵箱用戶</li>
<li id="logone2" onclick=" setLogTab(2)">手機用戶</li>
</ul>
<div class="box">
<div id="email">
<p>
<label>郵箱：</label>
<input name="" type="text" class="txt" value="https://bbs.csdn.net/topics/[email protected]" id="userEmail" />
</p>
<p>
<label>密碼：</label>
<input name="" type="text" class="txt" />
</p>
<p>
<input type="image" src="https://img.uj5u.com/2020/09/24/129505240556172.jpg" class="btn" name="btnLogin" />
<a href="https://bbs.csdn.net/topics/#">忘記密碼了？</a></p>
</div>
<div id="phone">
<p>
<label>手機號：</label>
<input name="" type="text" class="txt" />
</p>
<p>
<label>密 碼：</label>
<input name="" type="text" class="txt" />
</p>
<p>
<input type="image" src="https://img.uj5u.com/2020/09/24/129505240556172.jpg" class="btn" name="btnLogin" />
<a href="https://bbs.csdn.net/topics/#">忘記密碼了？</a></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!--中間內容塊結束-->
</div>
<iframe src="https://bbs.csdn.net/topics/foot.html" width="100%" scrolling="no" frameborder="0" height="185"></iframe>
</body>
</html>
（1）郵箱必須含有·和@。
（2）用戶名4-16字符，不能包含數字。
（3）密碼必須是6-32位字符。
（4）確定密碼需和創密碼一致。
（5）以上用戶輸入錯誤時都要在右側有提示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/116975.html
標籤：JavaScript
上一篇：好看的截圖箭頭
下一篇：大家好，幫忙解決一下問題