js建立必须填写的字段（详解）

最新推荐文章于 2022-03-03 23:16:21 发布

Elephant_H

最新推荐文章于 2022-03-03 23:16:21 发布

阅读量1.9k

点赞数 3

分类专栏： javascript 文章标签： javascript 前端必填字段表单验证处理表单

本文链接：https://blog.csdn.net/Elephant_H/article/details/53027802

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这是《Javascript基础教程（第九版）》6.3章节的一段代码，相信很多初学者看完之后会觉得书里的注解远远不够，以下是根据我的理解对这段代码的详解：

首先贴上所需的css：

body {
                color: #000;
                background-color: #FFF;
            }

.invalid {
                background-color: #FF9;
                border: 2px red inset;
            }

以及html:

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8" />
        <title>Check Page</title>
</head>
<body>
    <form action="#">
        <p><label for="username">用户名：<input type="text" id="username" class="reqd"></label></p>
        <p><label for="password">密码：<input type="password" id="password" class="reqd"></label></p>
        <p><label for="password2">确认密码：<input type="password" id="password2" class="reqd passwd1"></label></p>
        <p><input type="submit" style="margin-right: 50px;"><input type="reset" style="margin-right: 50px;"></p>
        </form>
</body>
</html>

下面进入正题：这段代码的主要工作机制是通过寻找在html中赋予必须填写项目的一个类：reqd,判断含有这个类的内容区是否为空，若为空则继续添加一个代表有问题的invalid样式，同时焦点定位在出现错误的地方。

window.onload = function() {
                document.forms[0].onsubmit = validform;
            }

页面加载完成时调用一个匿名函数，对页面中的第一个form元素（此页面是唯一一个）的onsubmit事件添加一个事件处理程序validform()。

function validform() {
    var allgood = true;       //创建变量allgood控制form元素是否可以提交信息，初始值true为可以提交
    var alltags = document.forms[0].getElementsByTagName("*");      //获取form元素中所有的标签名
        for(var i = 0; i < alltags.length; i++) {
            if(!validtag(alltags[i])) {         
                allgood = false;     //遍历获得的所有标签并作为参数传递给validtag（）函数，如果validtag（）函数返回false，则allgood也为false，表单停止提交信息行为
            }
        }
                return allgood;        //若validtag（）返回true,则form提交信息
}

这是嵌套函数当中最外层的主函数，通过返回allgood的值判断form是否成功执行onsubmit事件。下面是嵌套在主函数内的第二个函数：

function validtag(thistag) {
    var outclass = "";       //创建outclass空变量，存储validbaseonclass（）函数的返回值
    var allclasses = thistag.className.split(" ");    //将validform（）函数传递的参数标签的类名以空格分割后储存进allclasses数组
        for(var j = 0; j < allclasses.length; j++) {
            outclass += validbaseonclass(allclasses[j]) + " ";    //遍历allclasses数组中的元素（即标签的类），用空格与validbaseonclass（）函数的返回值拼接起来
        }
        thistag.className = outclass;   //拼接后的字符串重新被设置为标签的类
        if(outclass.indexOf("invalid") > -1) {    //如果outclass中"invalid"字符串出现过
            thistag.focus();    //聚焦这个标签
            if(thistag.nodeName == "INPUT") {    //如果这个标签名是"input"
                thistag.select();       //input输入区的内容将被选择
            }
            return false;
        }
        return true;       //true 或者 false 将被传回主函数validform（）

这段函数是为了找到我们比较在意的那些标签（含有reqd类的必须填写字段）而做准备，以及找到存在问题（含有invalid类）的地方时我们要进行哪些操作。下面的内层函数将开始寻找reqd类：

function validbaseonclass(thisclass) {
    var classback = "";    //创建classback函数方便我们在找到问题时进行操作
    switch(thisclass) {      //switch/case语句循环查找符合条件的内容
        case "":
        case "invalid":     
            break;       //如果找到了不含类的标签、已经发现问题的标签，那么我们跳出循环不做任何操作
        case "reqd":
            if(allgood && thistag.value == "") {
                classback = "invalid ";
            }       //当找到了含有reqd类的标签，同时allgood值为true、这个标签的value值（输入区内容）为空时，就要把代表有问题的invalid类添加进去
            classback += thisclass;     //并与原始的类拼接
            break;
        default:      
            classback += thisclass;    //如果上述条件都不满足，那并不在我们的考虑范围，同样跳出循环返回原始值
    }
    return classback;     //返回有问题or没毛病的类名给validtag()函数
}