Web前端學習記錄(十二)

4.4

疫情中逝去的每一個生命，都不只是一個簡單的數字或名字。他們是父親、母親、兒女、兄妹，是我們血脈相連的骨肉同胞。我們向逝世同胞致哀，同時也向那些與死神不屈抗爭的生命致敬，向那種生死瞬間的人間大愛致禮。

使用js完成註冊頁面省市區三級菜單級聯和表單驗證：

y：聽說最近學JavaScript了？
w：怎麼了？
y：就這？不整個活？
w(整活還得聽你bb)：不整，懶。
y：就這？點歌麼？我要點一首《算什麼男人》
w：別別別，首先實現省市區三級菜單級聯：選擇省份，城市隨之改變；選擇城市，地區隨之改變。預覽如下：

y：就這？
w(習慣了)：繼續。

cascade.js

// Created by guoqy
//省、市、區基本信息
var provinces=["山東省", "河北省"];
var cities =[["濟南市", "青島市"],["石家莊市", "廊坊市"]];
var areas=[
    [
        ["市中區", "歷下區", "天橋區", "槐蔭區", "歷城區", "長清區"],
        ["市南區", "市北區", "四方區", "李滄區", "城陽區", "嶗山區"]
    ], [
        ["橋西區", "新華區", "長安區", "裕華區", "井陘區", "藁城區", "鹿泉區", "欒城區"],
        ["安次區", "廣陽區", "三河市", "霸州市", "香河縣", "永清縣", "固安縣", "文安縣"]
    ]
];
//定義變量
var province,city,area;
//初始化省份下拉列表
function initProvince(){
	//獲取表單中的省、市、區元素
	province=document.getElementById("province");
	city=document.getElementById("city");
	area=document.getElementById("area");
    province.options.length=1;
    for(var i=0; i<provinces.length; i++){
		var option=new Option(provinces[i],provinces[i]);
        province.options.add(option);   
    }
}
//選擇省份時觸發
function provinceChange(){
	//對地區下拉列表初始化
	cityChange();
	//對城市下拉列表初始化
    city.options.length=1;
    if(province.selectedIndex==0){
		return;
	}
	//注意：選項的下標是從1開始的，數組的下標是從0開始的
    var pIndex=province.selectedIndex;
    for(var i=0; i<cities[pIndex-1].length; i++){
		var optionValue=cities[pIndex-1][i];
        var option=new Option(optionValue,optionValue);
        city.options.add(option); 
    }
}
//選擇城市時觸發
function cityChange(){
	//對地區下拉列表初始化
    area.options.length=1;
    if (city.selectedIndex==0){
		return;
	}
    var pIndex=province.selectedIndex;
    var cIndex=city.selectedIndex;
    for (var i=0; i<areas[pIndex-1][cIndex-1].length; i++) {
		var optionValue=areas[pIndex-1][cIndex-1][i];
        var option=new Option(optionValue,optionValue);
        area.options.add(option); 
    }
}

//窗口加載完畢時，完成事件綁定和初始化
/*window.onload = function () {
	//初始化省份下拉列表
	initProvince();
	//爲下拉列表綁定onchange事件
    province.onchange = provinceChange;
	city.onchange = cityChange;	
};*/

y(剛要說話)：·······
w(直接打斷)：最後這個window.onload之所以被註釋了，最後再解釋。再一個就是表單驗證，預覽如下：

validate.js

// Created by guoqy
//元素獲取焦點時觸發該函數
function onFoucs(){
	this.select();
	this.style.backgroundColor="#FFEC8B";
	this.style.color="#000000";
}
//元素失去焦點時觸發該函數
function onBlur(){
	this.style.backgroundColor="#FFFFFF";
	this.style.color="#000000";
}
//驗證用戶名是否有效
function checkUserName(){
	var userName=document.getElementById("userName");
	if(userName.value==""||userName.value=="請輸入用戶名")	{
		alert("用戶名不能爲空");
		userName.focus();
		return false;
	}
}
//驗證密碼和確認密碼是否有效
function checkPassword(){
	var userPwd=document.getElementById("userPwd").value;
	var userRePwd=document.getElementById("userRePwd").value;
	if(userPwd==""){
		alert("密碼不能爲空！");
		return false;
	}else if(userPwd.length<6||userPwd.length>20){
		alert("密碼長度爲6~20位，請進行確認！");
		return false;
	}else if(userPwd!=userRePwd){
		alert("新密碼和確認密碼不一致！");
		return false;
	}
	//密碼由字母、數字和符號的兩種以上組合
	if(/\d/.test(userPwd)&&/[a-z]/i.test(userPwd)||
		/\d/.test(userPwd)&&/[\@\#\$\%\&\*]/.test(userPwd)||
		/[\@\#\$\%\&\*]/.test(userPwd)&&/[a-z]/i.test(userPwd)){
		return true;	
	}else{
		alert("密碼必須是由字母、數字和符號的兩種以上組合!");
		return false;	
	}
	return false;	
}
//其他表單驗證不再提供，讀者可自行實現...
//表單提交時，觸發該函數
function checkForm(){
	return checkUserName()&&checkPassword();	
}
/*//窗口加載完畢時，完成事件綁定
window.onload = function () {
	//爲表單綁定表單提交事件處理函數
	var myform=document.forms[0];
	myform.οnsubmit=checkForm;
	//爲輸入文本框綁定onfocus和onblur事件處理函數
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		var type=inputs[i].type;
		if(type=="text"||type=="password"){
			inputs[i].οnfοcus=onFoucs;
			inputs[i].οnblur=onBlur;
		}
	}
};*/

y(再次被打斷)：······
w：window.onload被註釋的原因是一個頁面只能設置一次，後面的設置會覆蓋前面的設置。所以將上述兩個js文件中的window.onload事件合併到一起以單獨的文件onLoad.js進行存放。

onLoad.js：

// Created by guoqy
//窗口加載完畢時，完成事件綁定
window.onload = function () {
	//初始化省份下拉列表
	initProvince();
	//爲下拉列表綁定onchange事件
    province.onchange = provinceChange;
	city.onchange = cityChange;	
	//爲表單綁定表單提交事件處理函數
	var myform=document.forms[0];
	myform.onsubmit=checkForm;
	//爲輸入文本框綁定onfocus和onblur事件處理函數
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		var type=inputs[i].type;
		if(type=="text"||type=="password"){
			inputs[i].onfocus=onFoucs;
			inputs[i].onblur=onBlur;
		}
	}
};

最後附上register.html：

register.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=utf-8" />
<title>用戶註冊-Q-Walking E&S</title>
<link href="css/register.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/cascade.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script type="text/javascript" src="js/onLoad.js"></script>
</head>
<body>
<!--頂部區域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
  <tr>
    <td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td  class="padding-top"><img src="images/star.jpg">收藏 | HI，歡迎來訂購 ！<a href="../manageadmin/login.html" class="orange">[請登錄]</a> <a href="#"  class="orange"> [免費註冊]</a></td>
          <td align="right" > 客戶服務<img src="images/arrow.gif">&nbsp;網站導航<img src="images/arrow.gif">&nbsp;<span class="droparrow"><span class="shopcart"></span>我的購物車<span class="orange">0</span>件<img src="images/arrow.gif" /></span></td>
        </tr>
      </table></td>
  </tr>
</table>
<!--頂部區域 end--> 
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td height="95"><img src="../register/images/logo.jpg"></td>
    <td align="right"><img src="../register/images/banner.jpg"></td>
  </tr>
</table>
<!--logo和banner  end--> 
<!--菜單導航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" >
  <tr>
    <td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16" height="40">
        <tr>
          <td width="200">&nbsp;</td>
          <td width="80" align="center" >首頁</td>
          <td width="100" align="center">最新上架</td>
          <td width="100" align="center">品牌活動</td>
          <td width="100" align="center">原廠直供</td>
          <td width="80" align="center">團購</td>
          <td width="100" align="center">限時搶購</td>
          <td width="100" align="center">促銷打折</td>
          <td width="200" align="center">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
<!--菜單導航 end--> 

<!--註冊部分 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" 
        bgcolor="#f8f8f8">
 <tr>
  <td>
   <table width="1000" border="0" cellspacing="0" cellpadding="0" 
         bgcolor="#ffffff" align="center">
     <tr>
      <td valign="top"><h2 align="center">用戶註冊</h2>
        <hr width="90%" align="center" color="#ccc"/></td>
      <td width="420" rowspan="2" valign="middle">
        <img src="images/zhuce_pic.jpg" align="right"/></td>
     </tr>
     <tr>
       <td valign="top">
       <form action="#" method="post" enctype="multipart/form-data">
       <table width="90%" border="0" cellspacing="0" cellpadding="0" 
               class="reg" align="center">
          <tr>
            <td width="80">用戶名：</td>
            <td><input name="userName" type="text" id="userName" 
                      value="請輸入用戶名" /></td>
          </tr>
          <tr>
            <td>郵箱地址：</td>
            <td><input name="email" type="text" id="email" 
                      value="請輸入郵箱地址" /></td>
          </tr>
          <tr>
            <td>設置密碼：</td>
            <td><input name="userPwd" type="password" id="userPwd" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td class="gray12">6-20個字符，由字母、數字和符號的兩種以上組合。&nbsp;</td>
          </tr>
          <tr>
            <td>確認密碼：</td>
            <td><input name="userRePwd" type="password" id="userRePwd" /></td>
          </tr>
          <tr>
            <td>真實姓名：</td>
            <td><input name="realName" type="text" id="realName" 
                     value="請輸入真實姓名" /></td>
          </tr>
          <tr>
            <td>您的性別：</td>
            <td><input type="radio" name="sex" value="radio" checked/>男
            <input type="radio" name="sex" value="radio" />女</td>
          </tr>
          <tr>
            <td>上傳頭像</td>
            <td><input type="file" name="headPic" id="headPic" /></td>
          </tr>
          <tr>
            <td>您的手機：</td>
            <td><input name="mobile" type="text" id="mobile"
                     value="請輸入您的手機號" /></td>
          </tr>
          <tr>
            <td>單位名稱：</td>
            <td><input name="company" type="text" id="company"
                      value="請輸入單位名稱" /></td>
          </tr>
<!--          <tr>
            <td>單位地址：</td>
            <td><select name="province">
                     <option>請選擇省份</option>
                     <option>北京市</option>
                     <option>上海市</option>
                     <option>山東省</option>
                 </select>
                 <select name="city">
                     <option>請選擇城市</option>
                     <option>青島市</option>
                     <option>濟南市</option>
                     <option>東營市</option>
                 </select>
                 <select name="area">
                     <option>請選擇區</option>
                     <option>四方區</option>
                     <option>市南區</option>
                     <option>市北區</option>
                 </select></td>
          </tr>-->
          <tr>
            <td>單位地址：</td>
            <td><select name="province" id="province">
                     <option>-請選擇省份-</option>
                 </select>
                 <select name="city" id="city">
                     <option>-請選擇城市-</option>
                 </select>
                 <select name="area" id="area">
                     <option>-請選擇區-</option>
                 </select></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input name="address" type="text" id="address" 
                    value="請輸入街道地址" /></td>
          </tr>
          <tr>
            <td>您的愛好：</td>
            <td><input name="hobby" type="checkbox" value="購物" />購物
                 <input name="hobby" type="checkbox" value="影視" />影視
                 <input name="hobby" type="checkbox" value="餐飲" />餐飲</td>
          </tr>
          <tr>
             <td>協議內容：</td>
             <td><textarea cols="30" rows="3"></textarea></td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td><input type="submit" name="button" value="提交" /></td>
          </tr>
        </table>
       </form></td>
     </tr>
   </table>    
      <!--三大模塊圖片-->      
      <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class="padding-bottom">
        <tr>
          <td align="center"><a href="#"><img src="images/shop.jpg"  class="bian"/></a></td>
          <td align="center"><a href="#"><img src="images/movie.jpg" class="bian"/></a></td>
          <td align="center"><a href="#"><img src="images/food.jpg" class="bian"/></a></td>
        </tr>
      </table></td>
  </tr>
</table>

<!--註冊部分 end--> 

<!--底部 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" >
  <tr>
    <td bgcolor="#efefef" align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<Br/>
      中國青島 高新區河東路8888號  青軟教育集團    諮詢熱線：400-658-0166  400-658-1022<br/>
      <img src="../register/images/foot_pic.jpg"></td>
  </tr>
</table>

<!--底部 end-->
</body>
</html>

register.css:

@charset "utf-8";
/* CSS Document */
body {
	font-size: 12px;
	font-family: microsoft yahei;
	margin: 0px;
	color: black;
}
img {
	border: none;
}
a {
	color: black;
	text-decoration: none;
}
a:hover {
	color: #ce2626;
	text-decoration: none;
}
.padding-top {
	padding-top: 8px;
}
/*頭部*/
.top_line {
	border-bottom: 1px solid #ccc;
	font-size: 12px;
	font-family: "宋體";
	line-height: 30px;
}
.nav_font16 {
	font-size: 16px;
	font-weight: bold;
	color: white;
}
.orange {
	font-weight: bold;
	color: #ff6600;
}
.nav_active {
	background: #b12121;
	padding: 5px 0px;
	height: 30px;
}
a.white {
	color: white;
	text-decoration: none;
}
a.white:hover {
	color: yellow;
	text-decoration: none;
}
/*foot*/

.padding-bottom {
	padding-bottom: 10px;
}
/*註冊*/
.reg {
	font-size: 12px;
	line-height: 35px;
}
.reg input[type="text"], .reg input[type="password"] {
	border: 1px solid #ccc;
	padding: 5px;
	height: 15px;
	color: #999;
}
.reg select {
	padding: 5px;
	height: 30px;
	margin-right: 5px;
	color: #999;
}
.reg textarea {
	color: #999;
}
.gray12 {
	font-size: 12px;
	color: #999;
}
.bian {
	margin-top: 10px;
}
.bian:hover {
	filter: alpha(opacity=50); /*IE濾鏡，透明度50%*/
	-moz-opacity: 0.5; /*Firefox私有，透明度50%*/
	opacity: 0.5;/*其他，透明度50%*/
}

y：你還不錯，孺子可教也。