表单校验+商品全选+省市联动+隔行换色（JS案例）

最新推荐文章于 2024-06-10 22:52:06 发布

了不起的企鹅

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量200

点赞数

文章标签： js jquery checkbox vue javascript

本文链接：https://blog.csdn.net/user_name_CSDN/article/details/111660683

版权

综合案例

1 表单校验

注意:表单的提交事件,写在form标签中,οnsubmit=“return 函数名()”

<script>
    function checkForm() {
        //0.是否提交的标识
        let flag = true;

        // 1. 两次密码输入一致
        //获取两个标签的value值
        let pwdValue = document.querySelector("#pwd1").value;
        let repwdValue = document.querySelector("#pwd2").value;

        //当两次输入的密码不一致的时候,提示用户和阻止表单提交
        if(pwdValue!=repwdValue){
            document.querySelector("#pwdwarn").style.display="inline";//做为内联标签 展示
            flag=false;
        }else{
            document.querySelector("#pwdwarn").style.display="none";
        }

        // 2. 邮箱格式正确
        let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        //获取用户输入的内容
        let emailValue = document.querySelector("#email").value;

        //不满足规则
        if(!emailReg.test(emailValue)){
            document.querySelector("#emailwarn").style.display="inline";
            flag=false;
        }else{
            document.querySelector("#emailwarn").style.display="none";
        }

        // 3. 手机号格式正确
        return flag;
    }
</script>

2 商品全选

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例-商品全选</title>
</head>
<body>
<!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
<button type="button" id="btn1">1. 全选</button>
<button type="button" id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
    //获取所有的checkbox
    let boxArr = document.querySelectorAll("[type='checkbox']");

    //给按钮添加单击事件
    //全选
    document.querySelector("#btn1").onclick=function () {
        //遍历数组,获取每个复选框,然后操作它的checked属性
        for(let i=0;i<boxArr.length;i++){
            //操作checked属性,值为true
            boxArr[i].checked=true;
        }
    };

    //反选
    document.querySelector("#btn2").onclick=function () {
        //遍历数组,获取每个复选框,然后操作它的checked属性 取反
        for(let obj of boxArr){
            //取反
            obj.checked = !obj.checked;
        }
    }

</script>
</body>
</html>

3 省市联动

<!--
省市级联
1. 页面加载完成后自动装载省数据
2. 当选中省时,装载该省的市数据
-->
<script type="text/javascript">
    // 准备数据
    var data = new Array();
    data['北京'] = ['顺义区', '昌平区', '朝阳区'];
    data['河北'] = ["保定","石家庄","廊坊"];
    data['辽宁'] = ["沈阳","铁岭","抚顺"];

    let provinceId = document.getElementById("provinceId");//获取省下拉列表
    let cityId = document.getElementById("cityId");//获取市下拉列表

    //页面加载完成后自动装载省数据
    for(let index in data){
        //alert(index);
        provinceId.innerHTML+=`<option value='${index}'>${index}</option>`;
    }

    //给省份下拉选添加onchange事件,获取省份的value属性,通过value属性值去二维数组中获取市的数组
    provinceId.onchange=function () {
        //初始化市下拉选
        cityId.innerHTML="<option value=''>----请-选-择-市----</option>";

        //alert(this.value);
        //获取市的数组
        let cityArr = data[this.value];

        //遍历市的数组
        for(let city of cityArr){
            //将每个市封装成ｏｐｔｉｏｎ标签，追加到ｃｉｔｙ的下拉选中
            cityId.innerHTML+=`<option value='${city}'>${city}</option>`;
        }
    }
</script>

4 隔行换色

<!--
隔行变色
	1. 表格奇偶行颜色不同
	2. 鼠标移入颜色高亮
-->
<script>
    //1.获取所有的tr,返回数组
    let trArr = document.querySelectorAll("tr");

    let tmp;

    //2.遍历数组,从第二个开始遍历,若索引和2能整除,设置一个颜色;否则设置另外一个颜色
    for(let i=1;i<trArr.length;i++){
        if(i%2==0){
            trArr[i].style.backgroundColor = "pink";
        }else{
            trArr[i].style.backgroundColor = "yellow";
        }

        //悬停变色
        trArr[i].onmouseover=function () {
            //this代表的是当前行
            tmp = this.style.backgroundColor;//存起来原来的值
            this.style.backgroundColor="gray";
        }

        //移出恢复原色
        trArr[i].onmouseout=function () {
            this.style.backgroundColor=tmp;
        }
    }

</script>

了不起的企鹅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
表单校验+商品全选+省市联动+隔行换色（JS案例）

综合案例1 表单校验注意:表单的提交事件,写在form标签中,οnsubmit=“return 函数名()”<script> function checkForm() { //0.是否提交的标识 let flag = true; // 1. 两次密码输入一致 //获取两个标签的value值 let pwdValue = document.querySelector("#pwd1").value;
复制链接

扫一扫