多次弹出警报并提交按钮仅在第二次单击后才起作用

Question

我正在做我的 CS50 最终项目。 我正在设计一个 web 应用程序：我正在使用 flask。 这发生在登录/注册页面中。 我正在尝试检查用户名是否已被使用（通过 jsonify）以及密码和密码确认是否使用 JS 相等。

所以基本上问题是：加载页面并填写注册表单后，第一次单击提交按钮时没有任何反应。 在第二次单击时，一切都按预期工作：功能运行良好并检查匹配的密码，以及用户名是否可用，并在必要时发出警报。 如果我然后关闭警报 window 并再次单击提交按钮，我会从用户检查 function 收到两个警报。 如果再次做同样的事情 3 个警报然后 4 个等等....由于某种原因，function 被一次又一次地调用，但我不知道在哪里......

这是 HTML：

<form id='register' action='/register' method="POST"  onsubmit="return !!(passwordcheck() & usercheck());" ></form>

这是同一页面中脚本标记中的两个JS function：

 function passwordcheck(){

       const password = document.getElementById('password').value;
       const passwordc = document.getElementById('passwordc').value;

       if (password != passwordc){
         alert('Passwords do not match')
         return false;
       }
     }

        function usercheck(){

  $('document').ready(function(){

    $('form').on('submit',function(e){

      e.preventDefault();
      var username = document.querySelector('#username').value;
      $.get('/check?username=' + username, function(r){
        if(r == false){
          alert('User taken');
          $('#username').focus();
        }
        else{
          (document).getElementById('register').submit();
        }
      } )
    })
  })
}

下面是 application.py 文件中的 Python 代码，用于查询数据库中的用户名：

@app.route("/check", methods=["GET"])
def check():
    print(Fore.BLUE + "check function, line 99") 
    """Return true if username available, else false, in JSON format"""
    username = (request.args.get('username'),)
    if username:

        c.execute("SELECT username FROM users WHERE username =?", username)
        old_user = c.fetchall()

        if len(old_user) > 0:
            return jsonify(False)
        else:
            return jsonify(True)

Answer 1

您已经为表单提交事件定义了两个处理程序：
- html ( onsubmit="return;!(passwordcheck() & usercheck());" ) 中的第一个是userCheck function 实际上并没有发出请求
- 确实发出请求的userCheck function ( $('form').on('submit',function(e){ ) 中的第二个

因此，第一次提交userCheck function 时，它不会发出请求，而是向表单添加提交事件处理程序。 这就是为什么仅在第二次提交表单后才提出请求的原因。

你应该更好地使用这样的东西：

function passwordcheck() {

    const password = document.getElementById('password').value;
    const passwordc = document.getElementById('passwordc').value;

    if (password != passwordc) {
        alert('Passwords do not match')
        return false;
    }
}

function usercheck(handleSuccess, handleError) {
    var username = document.querySelector('#username').value;
    $.get('/check?username=' + username, function(r) {
        if (r == false) {
            handleError();
        } else {
            handleSuccess();
        }
    })
}

function submit() {
    (document).getElementById('register').submit();
}

function handleUserError () {
    alert('User taken');
    $('#username').focus();
}

$('document').ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();

        if (!passwordcheck()) {
            return;
        }

        usercheck(submit, handleUserError);
    })
})

并且在您的表单元素上没有onsubmit属性。