JavaScript作业五 DOM编程应用

JavaScript作业五 DOM编程应用


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

代码实现:

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】实现注册页面中的表单验证。

代码实现:

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】在后台管理模块中,实现商品列表中的全选和反选效果。

代码实现:

<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>

 

 

声明:May丶乘剑的部落小阁|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - JavaScript作业五 DOM编程应用


一个偶尔努力、偶尔懈怠的"搬砖"人

查看评论

Comments | NOTHING

暂无评论
Welcome back , [ 修改 ]