JavaScript DOM表单相关操作之相关案例

最新推荐文章于 2024-07-26 20:46:33 发布

知数SEO

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量417

点赞数 6

分类专栏： JavaScript 文章标签： javascript JS表单 JSDOM

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135775799

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

之前写了相关的JavaScript DOM表单相关操作，今天根据几个案例一起巩固下吧

1、全选、全不选、反选

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <div id="check">
        <input type="checkbox" name="dopo" value="斗帝">斗帝
        <input type="checkbox" name="dopo" value="斗圣">斗圣
        <input type="checkbox" name="dopo" value="斗尊">斗尊
        <input type="checkbox" name="dopo" value="斗宗">斗宗
    </div>
    <button id="all">全选</button>
    <button id="not">全不选</button>
    <button id="fanxuan">反选</button>
</form>
</body>
<script>
    var all = document.getElementById('all');
    var not = document.getElementById('not');
    var fanxuan = document.getElementById('fanxuan');
    var fruit = document.getElementsByTagName('input');  // 所有的复选框
    // 绑定全选按钮点击事件
    all.onclick = function (){
        console.log('all');
        // 遍历复选框
        for(i=0; i<fruit.length; i++){
            fruit[i].checked = true;
        }
    }
    // 绑定全不选按钮点击事件
    not.onclick = function (){
        // 遍历复选框
        for(i=0; i<fruit.length; i++){
            fruit[i].checked = false;
        }
    }
    // 绑定反选按钮触发的事件
    fanxuan.onclick = function (){
        // 遍历复选框的checked属性进行取反
        for(i=0;i<fruit.length;i++){
            fruit[i].checked = !fruit[i].checked;
        }
    }
</script>
</html>

2、下拉框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<select id="select1" multiple>
    <option>左1</option>
    <option>左2</option>
    <option>左3</option>
    <option>左4</option>
</select>
<span>
    <button onclick="toRight()"> >> </button>
    <button onclick="toLeft()"> << </button>
</span>

<select id="select2" multiple>
    <option>右1</option>
    <option>右2</option>
    <option>右3</option>
    <option>右4</option>
</select>
</body>
<script>
    var select1 = document.getElementById('select1');
    var select2 = document.getElementById('select2');
    // 将左边选中的移动到右边去
    function toRight(){
        var childs = select1.childNodes; // 获取所有option节点
        for(var i=0;i<childs.length;i++){
            if (childs[i].selected){
                select2.appendChild(childs[i])
            }
        }
    }
    // 将右边选中的移动到左边去
    function toLeft(){
        var childs = select2.childNodes;
        for (var i=0;i<childs.length;i++){
            if(childs[i].selected){
                select1.appendChild(childs[i]);
            }
        }
    }
</script>
</html>

3、城市级联

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<select id="province">
    <option>请选择省份</option>
</select>
<select id="city">
    <option>请选择城市</option>
</select>
<select id="country">
    <option>请选择区县</option>
</select>
</body>
<script>
    var provinceDate = ['河北','河南','湖北','湖南'];
    var cityDate = [
        ['唐山','邯郸','保定','邢台'],
        ['郑州','开封','洛阳','安阳'],
        ['武汉','黄石','十堰','宜昌'],
        ['长沙','株洲','湘潭','衡阳'],
    ];
    var countryDate = [
        [
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
        ],
        [
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
        ],
        [
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
            ['路南区','路北区','开平区','古治区'],
        ]

    ];
    // 获取三个下拉框对象
    var provinceObj = document.getElementById('province');
    var cityObj = document.getElementById('city');
    var countryObj = document.getElementById('country');
    // 把省份循环放到下拉框下
    for(var i=0;i<provinceDate.length;i++){
        // 创建空的option下拉框
        var newOption = document.createElement('option');
        newOption.value = i;
        newOption.innerHTML = provinceDate[i];
        provinceObj.appendChild(newOption);
    }
    // 省份触发的事件
    provinceObj.onchange = function (){
        cityObj.innerHTML = ''; // 清空城市的下拉框内容
        var provinceId = provinceObj.value; //得到当前选中省份的id
        var citys = cityDate[provinceId]; // 通过id得到对应的城市
        // 把城市循环放到下拉框中
        for(var i=0;i<citys.length;i++){
            // 创建空的option
            var newOption = document.createElement('option');
            newOption.value = i;
            newOption.innerHTML = citys[i]; // 设置option文本值
            cityObj.appendChild(newOption); // 将option添加到select
        }
    }
    // 城市触发事件
    cityObj.onchange = function (){
        countryObj.innerHTML = '';
        var provinceId = provinceObj.value;
        var cityId = cityObj.value;
        var countries = countryDate[provinceId][cityId];
        // 把城镇循环放到下拉框中
        for(var i=0;i<countries.length;i++){
            // 创建空的option
            newOption = document.createElement('option');
            newOption.value = i;
            newOption.innerHTML = countries[i];
            countryObj.appendChild(newOption);
        }
    }
</script>
</html>

4、用户注册

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form action="https://www.zhishunet.com" onsubmit="return toServer()">
    <h3>用户注册</h3>
    用户名：<input type="text" name="username" onblur="blurCheck(this)">
    <span>首字母为字母，长度为6-10个字符，可以是数字、字母和下划线</span><br><br>
    邮箱：<input type="text" name="email" onblur="blurCheck(this)">
    <span>正确的邮箱格式</span><br><br>
    手机：<input type="text" name="phone" onblur="blurCheck(this)">
    <span>中国大陆手机号</span><br><br>
    <button type="submit">点击注册</button>
</form>
</body>
<script>
// 定义用于判断的标志
var userFlag = emailFlag = phoneFlag = false;
// 当每一个输入框失去焦点的时候触发这个函数
function blurCheck(obj){
    var span = obj.nextSibling;  // 得到这个input后面的span对象
    if(span.nodeType == 3){  // 过滤掉文本节点
        span = span.nextSibling;  // 如果是文本节点继续往下找
    }
    span.style.color = 'red';  // 设置提示信息的字体颜色
    var value = obj.value;  // 获取输入框中的值
    console.log(value);
    if(obj.name === 'username'){  // 判断是用户名这个框触发的失去焦点函数
        var reg = /^[a-zA-Z]{1}[0-9a-zA-Z_]{6,10}$/;  // 定义正则
        if(!reg.test(value)){  // 如果验证不通过
            userFlag = false;
            span.innerHTML = '输入的用户名格式错误请重新输入';
        }else{
            userFlag = true;
            span.style.color = 'green';  // 显示样式设置成绿色
            span.innerHTML = '格式正确';
        }
    }else if(obj.name === 'email'){
        var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if(!reg.test(value)){
            emailFlag = false;
            span.innerHTML = '输入的邮箱格式错误，请重新输入';
        }else{
            emailFlag = true;
            span.style.color = 'green';  // 显示样式设置成绿色
            span.innerHTML = '格式正确'
        }
    }else if(obj.name === 'phone'){
        var reg = /^1[3|4|5|7|8]\d{9}$/;
        if(!reg.test(value)){
            phoneFlag = false;
            span.innerHTML = '输入的手机格式错误，请重新输入';
        }else{
            phoneFlag = true;
            span.style.color = 'green';
            span.innerHTML = '格式正确';
        }
    }
}
// onsubmit事件调用的函数，用来检查是否允许提交
function toServer(){
    if(userFlag && emailFlag && phoneFlag){
        return true;
    }else{
        alert('您的信息填写错误，其nigh检查');
        return false;
    }
}
</script>
</html>