Question

这是我的第一篇文章，如果我有任何错误，请道歉，请告诉我。

我正在尝试拥有一个外部javascript文件，该文件具有可以重用的功能。例如，当我有一个文本字段并想要验证它时，我希望能够传递三个参数（要检查的值，字段描述和允许的最小长度）

在我的HTML顶部（头部标记上方）我有我的脚本标记： <script src="checkInputs.js"></script>

到目前为止，我有一张表格。表单有这两个字段（省略了一些代码）：

<form name="join" action="createUser.php" onsubmit="return initDetails()" method="post">
<label> Choose a username: </label> <input type="text" name="username" maxlength=20><br>
<div id="uname" style="display: none; font-family:arial;color:red;font-size:12px;"></div>

表单的提交调用以下函数（我知道它正确调用它）：

    function initDetails() {
    alert("inside initDetails");
    var unamev=document.forms["join"]["username"].value;
    var pass=true;
    var usernameCheck = [];
    usernameCheck.push(checkTextField(unamev, 5, "username"));
    alert("check variables");
    alert(usernameCheck['Pass']);
    alert(usernameCheck['Error']);
    alert("check variables finished");
        if (usernameCheck['Pass']=="True"){
            alert("We pass");
            document.getElementById('uname').style.display = 'none';
        }
        else{
            alert("We fail");
            pass=false; 
            document.getElementById('uname').style.display = 'block';
            document.getElementById("uname").innerHTML = usernameCheck['Error'];
        }
    return pass;
}

所以上面负责获取用户名，调用checkTextField和我的三个值，并将返回的项存储在数组中。这些用于查看测试是通过还是失败，并填充错误消息并显示带有该错误的隐藏块，最后返回true或false给提交。

现在对于外部js文件，我有以下内容：

    function checkTextField(fieldInput, maxLength, fieldDescription) {
alert("Inside checkInputs.js ")
var errmsg = ""; 
    if (fieldInput.length < maxLength ){
            pass=false;
            errmsg = "<li> The " + fieldDescription + " must be larger than 5 characters </li>";
        if (fieldInput == null  || fieldInput == ""){
            pass=false;
            errmsg = "<li> The " + fieldDescription + " cannot be empty </li>";     
        }
        return {'Pass': "False", 'Error': errmsg};
    }
    else{
        return {'Pass': "True", 'Error' : ""};  
    }

}

我曾经在HTML文件中有一些非常相似的东西，但是为了避免重复的代码，我希望有一个各种框架来处理这些。现在很可能是我正在制作一个简单的语法小学生错误，但我试图用Javascript开始，它不太好。

更新

我已根据此处发布的一些建议更新了代码。它现在调用外部文件，并显示以下警告：

        alert(usernameCheck['Pass']);
    alert(usernameCheck['Error']);

两个警报都未定义....

Answer 1

您需要阻止默认事件操作。最简单的方法是不在表单标记上设置事件处理程序，而是设置in a script using addEventListener()。给定事件处理程序回调的第一个参数（基本上应该执行initDetails函数的操作）是事件对象：

var form = document.forms['join'];
form.addEventListener( 'submit', function( event ) {

    // prevent the default submit action
    event.preventDefault();

    // do your checks, e.g.
    var usernameCheck = checkTextField( form.['username'].value, 5, 'username' );
    // …

    if( usernameCheck === 'Pass' ) {

        // finally submit the form
        form.submit();

    }

}, false );

另见：

我在这里做的其他更改也在上面的评论中提到。例如，使用===进行比较或不将值推送到数组，而是将其分配给一个简单变量（a = b;）。

UPDATE：要解决多个返回值的问题，您应该再次阅读“theUtherSide”的答案。只需返回一个对象。

Answer 2

我认为你的验证函数没有被调用，因为这行：

var usernameCheck[] = checkTextField(unamev, 5, "username");

应该是：

var usernameCheck = checkTextField(unamev, 5, "username");

如果您想先声明变量，可以这样做：

var usernameCheck = [];
（你也可以用这种方式给它一个尺寸。）

框架设计的另一个提示：

更具伸缩性的策略可能是让你的函数返回一个对象，而不是一个数组。

这样你可以让它返回命名值，如果数组发生变化你的实现不会中断，你不必担心大小。

例如，而不是： return ["Fail", errmsg];

执行： return {'Pass': true, 'msg': errmsg};

然后，在实施中： usernameCheck[1];

变为： usernameCheck['msg'];

Javascript - 使用外部JS文件

2 个答案: