Javascript-使用外部JS文件

Question

这是我的第一篇文章，如果我发现任何错误，我们深表歉意。

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

在HTML的顶部（在head标记上方），有我的脚本标记： <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，它不太好。

UPDATE

我已根据此处发布的许多建议更新了代码。 现在，它将调用外部文件，并发出以下警报：

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

两种警报均未定义。

Answer 1

您需要阻止默认事件操作。 最简单的方法是不在事件标签上而是在脚本中使用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 );

也可以看看：

• https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

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

更新：要解决具有多个返回值的问题，您应该再次阅读»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'];