Javascript - 使用外部 JS 文件

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

我认为您的验证函数没有因为这一行而被调用：

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'];

Answer 2

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

另见：

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

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

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