JavaScript_Homework5

JavaScript作业五 DOM编程应用

JavaScript作业五

【任务8-1】实现注册页面中的省市区三级菜单级联。

注册页面引入此js 并修改部分id值

var provinces = ["山东省","河北省"];
var cities = [["济南市","青岛市"],["石家庄市","廊坊市"]];
var areas = [
	[
		["市中市","历下区","天桥区","槐荫区","历城区","长清区"],
		["市南区","市北区","四方区","李沧区","朝阳区","崂山区"]
	],
	[
		["桥西区","新华区","长安区","裕华区","经济区","鹿泉区","栾城区","藁城区"],
		["安次区","广阳区","三河市","霸州市","香河县","永清县","固安县","文安县"]
	]
];

var province,city,area;

function initProvnce(){
	province = document.getElementById("provinces");
	city = document.getElementById("cities");
	area = document.getElementById("areas");

	province.option.length = 1;
	for (var i = 0; i < provinces.length; i++) {
		var option = new Option(provinces[i],provinces[i]);
		provinces.options.add(option);
	}
}



function provenceChange(){
	cityChange();
	city.option.length = 1;
	if (provinces.selectedIndex == 0) {
		return;
	}
	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.option.add(option);
	}
}

function cityChange(){
	area.option.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(){
	initProvnce;
	province.onchange = provenceChange;
	city.onchange = cityChange;
}

【任务8-2】实现注册页面中的表单验证。

注册页面引入此js

	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.fouces();
		return false;
	}
}

function checkPassword(){
	var userPwd = document.getElementById("userPwd").value;
	var usereRePwd = document.getElementById("usereRePwd").value;
	if (userPwd == "") {
		alert("密码不能为空！");
		return false;
	}else if (userPwd.length < 6 || userPwd.length > 20){
		alert("密码长度为6~20位，请确认！");
		return false;
	}else if (userPwd != usereRePwd) {
		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.form;
	myform.onsubmit = checkForm;
	var inputs = document.getElementByTagName("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].onfblur = onBlur;
		}
	}
}

【任务8-3】在后台管理模块中，实现商品列表中的全选和反选效果。

将js写到商品列表页面中并调用

<script type="text/javascript">
	function selectAll(){
		var items = document.getElementsByName("checkItem");
		var selectAll = document.getElementById("checkAll");
		var checkOther = document.getElementById("checkOther");
		checkOther.checked = false;
		for (var i = 0; i < items.length; i++) {
			items[i].checked = checkAll.checked;
		}
	}

	function selectOther(){
		var items = document.getElementsByName("checkItem");
		var selectAll = document.getElementById("checkAll");
		var checkOther = document.getElementById("checkOther");
		checkAll.checked = false;
		for (var i = 0; i < items.length; i++) {
			items[i].checked = !items[i].checked;
		}
	}
	
</script>