问题描述

表单验证脚本不起作用

add.jsp

 <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<title>添加</title>
<link href="/IMS/css/css.css" rel="stylesheet" type="text/css">
<script src="/IMS/lib/ValidForm.js"></script>
<script src="/IMS/lib/MakeRequest.js"></script>
<script>
window.onload = initForm;

function initForm() {
     validForm(document.getElementById("add"));
     makeRequest(document.getElementById("aname"));
}
</script>
</head>
<body>
    <form action="" method="post" name="add" id="add">
    <input type="hidden" name="action" value="add">
            <table>
                <tr>
                    <td width="120" align="right">名称：</td>
                    <td width="180" align="left"><input name="aname" type="text" id="aname" autofocus="autofocus" date="Department?action=s&name=" class="reqd"></td>
                </tr>
                <tr>
                    <td align="right">权限：</td>
                    <td align="left"><input name="level" id="level" class="reqd"></td>
                </tr>
                <tr>
                    <td align="right">
                            <a href="index.jsp">返回</a>
                        </td>
                    <td align="left"><input name="add" type="submit" id="add" value="添加"></td>
                </tr>
            </table>
    </form>
</body>
</html>

ValidForm.js

function validForm(obj) {
    obj.addEventListener('submit', doit(tttt), false);
    function doit(obj) {
    var allGood = true;
    var allTags = obj.getElementsByTagName("*");

    for (var i = 0; i < allTags.length; i++) {
        if (!validTag(allTags[i])) {
        allGood = false;
        }
    }
    return allGood;

    function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j = 0; j < allClasses.length; j++) {
        outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();
        if (thisTag.nodeName == "INPUT") {
            thisTag.select();
        }
        return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
        var classBack = "";

        switch (thisClass) {
        case "":
        case "invalid":
            break;
        case "reqd":
            if (allGood && thisTag.value == "") {
            classBack = "invalid ";
            }
            classBack += thisClass;
            break;
        default:
            classBack += thisClass;
        }
        return classBack;
        }
    }
    }
}

解决方案

obj.addEventListener('submit', doit(tttt), false);这句话是有问题的；
addEventListener接收的第二个参数是function，而不是一个函数的执行结果；

所以需要把doit重写（给你提供个思路）：
doit(tttt)；

function doit(obj){
return function(){
//你的业务逻辑，这个才会在submit的时候执行
}
}

解决方案二：

addEventListener IE8-不支持，而且你tttt变量也没有定义

obj.addEventListener('submit', doit(tttt), false);

===》
if(obj.addEventListener)
obj.addEventListener('submit', function(){doit(obj)}, false);
else if(obj.attachEvent)o.attachEvent('onsubmit', function(){doit(obj)});
else obj.onsubmit=function(){doit(obj)}