Javascript 表单验证不执行

Question

我有一个输入框。 提交后，我有一个 PHP 脚本，用于检查输入框是否为空。 如果是，它会显示错误消息并运行 Javascript 函数。

我的问题是出现了错误消息，但 Javascript 函数没有执行。

这是我的脚本：

<?php    
if(isset($_POST['submit'])) {

    $username = $_POST['username'];

    if(empty($username)) {
        echo 'Please enter a username';

        echo"
            <script>
            window.onload = function () {
                function validate(e) {
                    var username = document.getElementById('username');
                    if (username.value.trim() == '') {
                        username.classList.add('error');

                        setTimeout(function() {
                            username.classList.remove('error');
                        }, 300);
                        e.preventDefault();
                    }
                }
            }
            </script>
            ";

    }else{
        // something here
    }
}
?>

<form method="post" id="login">
    <input type="text" id="username" name="username">
    <input type="submit" name="submit">
</form>

Answer 1

你的 JavaScript 函数实际上在哪里执行？ 去掉逻辑，你所拥有的结构是：

window.onload = function () {
  function validate(e) {
    //...
  }
}

所以当窗口加载时，你执行一个函数。 该函数无非是定义了另一个函数。 没有任何东西会执行其他功能。

如果您想在窗口加载时执行该代码，请不要将其包装在函数中。 只需执行它：

window.onload = function () {
  // validation logic here
}