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>