ES6语法实现表单验证时radio、checkbox选中状态无法识别问题

出错原因汇总 #

• 核心错误：单选框、复选框验证逻辑中，误将name属性的字符串值（比如gender、hobbies[]）当成DOM元素集合进行索引，radname[rad]本质是读取字符串的第rad位字符，永远无法读取到DOM元素的checked属性，所以不管有没有选中，判断结果永远为假
• 衍生问题1：radname、grpname未声明变量，污染全局作用域，不符合ES6规范
• 衍生问题2：同一组单选/复选会被遍历多次，重复执行验证逻辑
• 衍生问题3：单选/复选的选中标记未按组重置，页面存在多组控件时验证逻辑会错乱

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单验证</title>
    <script type="text/javascript">
        // 用const声明函数符合ES6规范
        const validateAll = () => {
            const formdata = document.forms[0].elements;
            const numelems = formdata.length;
            let msg = '';
            let radmsg = '';
            let checkmsg = '';
            let textmsg = '';
            let checker = true;
            // 存储已经验证过的单选、复选组，避免重复验证
            const validatedRadio = new Set();
            const validatedCheckbox = new Set();

            for (let i = 0; i < numelems; i++) {
                const elem = formdata[i];
                if (elem.type == 'text' && elem.value === '') {
                    msg += "<br>请输入你的" + elem.name;
                    checker = false;
                }

                if (elem.type == 'radio' && !validatedRadio.has(elem.name)) {
                    const radname = elem.name;
                    validatedRadio.add(radname);
                    // 先拿到当前单选组的所有DOM元素集合
                    const radioGroup = document.getElementsByName(radname);
                    let radioelem = false;
                    for (let rad = 0; rad < radioGroup.length; rad++) {
                        if (radioGroup[rad].checked === true) {
                            radioelem = true;
                            break; // 找到选中项直接跳出循环，优化性能
                        }
                    }
                    if (radioelem === false) {
                        radmsg = "<br>请选择你的" + radname;
                        checker = false;
                    }
                }

                if (elem.type == 'checkbox' && !validatedCheckbox.has(elem.name)) {
                    const grpname = elem.name;
                    validatedCheckbox.add(grpname);
                    // 先拿到当前复选组的所有DOM元素集合
                    const checkboxGroup = document.getElementsByName(grpname);
                    let checkboxelem = false;
                    for (let chk = 0; chk < checkboxGroup.length; chk++) {
                        if (checkboxGroup[chk].checked === true) {
                            checkboxelem = true;
                            break; // 找到选中项直接跳出循环，优化性能
                        }
                    }
                    if (checkboxelem === false) {
                        checkmsg = "<br>请至少勾选一项" + grpname;
                        checker = false;
                    }
                }

                if (elem.type == 'select-one' && elem.value === '') {
                    msg += "<br>请选择你的" + elem.name;
                    checker = false;
                }

                if (elem.type == 'textarea' && elem.value === '') {
                    textmsg += "<br>请输入你的" + elem.name;
                    checker = false;
                }

            }

            document.getElementById('err').innerHTML = msg + radmsg + checkmsg + textmsg;
            return checker;
        }
    </script>
</head>
<body>
    每类输入项都需要至少输入/选择一项内容<br><br>
    <span id = "err"></span>
    <form action = "dynamic.html" method = "post" onsubmit="return validateAll();" ><br/>
        姓名:<input type = "text" name = "fullname" placeholder="输入全名"/><br/>
        性别:<br/>
        男<input type = "radio" name = "gender" value="male"/>女<input type = "radio" name = "gender" value="female"/><br/>
        爱好 <br/>
        棒球 <input type = "checkbox" name = "hobbies[]" value = "baseball" />  
        足球 <input type = "checkbox" name = "hobbies[]" value = "football" />  
        冰球 <input type = "checkbox" name = "hobbies[]" value = "hockey" /><br/>
        最喜欢的节目 <select name = "show">
        <option value = "">请选择</option>
        <option value = "ATHF">饮料杯历险记</option>
        <option value = "Family Guy">恶搞之家</option>
        <option value = "Simpsons">辛普森一家</option>
    </select><br/>
    备注<br/>
    <textarea cols = "50" rows = "6" name = "comments"></textarea><br/>
    <input type = "submit" name = "submit" value = "提交" />
</form>
</body>
</html>

内容的提问来源于stack exchange，提问作者Timmy