Question

为了学习目的，我编写了一个简单的javaScript函数来使用JS验证所需的userName字段。

我面临两个问题 -

在提交按钮中，onclick事件处理程序不会调用 checkRequired方法和表单已过帐。
我无法在chrome调试器中设置断点。
即使在代码中使用调试器也不会带来控件调试器断点。

TaskManager.js

function checkRequired() {
    debugger;
    var userName = document.getElementById("txtUserName");
    if (userName.length == 0) {
        alert("username is required attribute");
        return false;
    }
    return true;
}

AddNewUser函数：

<html>
<head>
    <title>Add new User</title>
    <style type="text/css" media="all">
        button {
            width: 65px;
        }
    </style>
    <script src="TaskManager.js" type="text/javascript"></script>
</head>
<body>
    <form method="post" action="AddNewUser.html" style="width: 560px; height: 850px; margin-left: 10px; margin-top: 10px">
        <fieldset>
            <legend>New User</legend>
            <table>
                <tr>
                    <td>
                        <label>User Name:</label></td>
                    <td>
                        <input type="text" id="txtUserName" name="User Name" maxlength="10" /></td>
                </tr>

                <tr>
                    <td>
                        <button id="btnSubmit" type="submit" onclick="checkRequired()">Add User</button>
                    </td>
                    <td>
                        <button id="btnCancel">Cancel</button>
                    </td>
                </tr>

            </table>
        </fieldset>

    </form>

</body>
</html>

感谢您提供任何帮助以解决此问题。

Answer 1

如果未达到断点，则该函数无法以某种方式访问，您应该在控制台中出错。该函数是否在全局范围内？

Here's your code，我做了一些改动让它发挥作用。首先，必须考虑处理程序的结果：

<button id="btnSubmit" type="submit" onclick="javaScript:return checkRequired();">

然后，您必须检查您要验证的文本框中的.value.length：

var userName = document.getElementById("txtUserName");
if (userName.value.length === 0) {[...]

无论如何，如果可能的话，我会建议您使用不引人注意的方法，并将事件直接绑定在您的javascript代码中，而不是在标记中定义它：

var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
    console.log('aho');
    var userName = document.getElementById("txtUserName");
[...]

Answer 2

检查是否正在加载脚本文件。在函数定义之外的文件顶部发出警报。

如果警报未显示，请仔细检查脚本文件的名称。它与脚本标记中引用的相同吗？它在同一个目录中吗？

无法在Chrome中设置断点

2 个答案: