从jquery返回到javascript？

Question

所以我对 Javascript 还很陌生，对 jQuery 也很陌生。在处理这个项目 atm 时，我从 Javascript 开始，但我的问题的很多解决方案在 jQuery 中要容易得多。

所以我有一些javascript，如果所有表单都没有通过验证，基本上可以防止用户按下提交。

所以这是我的领域。

<td><input type="password" maxlength="16" name="passwd" id="passwd" onblur="validatePassword(this.value)" /></td>
<td><span id="pMess"></span></td>

这是我的提交。

<td><input type="submit" value="Register" onclick="return validate(this.form)"/></td>
<td><a href='Index.php'>Login?</a></td>

正如您所看到的，当您按下提交时，它会进入验证功能，即：

function validate(theForm) {
    var valid = true;

    if ( !validateEmail(theForm.emailrec.value) ) valid = false;
    if ( !validatePassword(theForm.passwd.value) ) valid = false;
    if ( !validatePostcode(theForm.postcode.value) ) valid = false;
    if ( valid ) return true;
    else return false;
}

最后这是字段检查器。

function validatePassword(passwordString) {
   var valid = true;

   if ( passwordString == "" ) {
      feedback('pMess','Enter your password here');
      valid = false;
   } else if ( passwordString.length <= 5 ){
      feedback('pMess','Password too short');
      valid = false;
   } else feedback('pMess','Acceptable');

   if ( valid ) return true;
   else return false;
}

我的用户名字段检查器与 jQuery 中的略有不同

$(document).ready(function() {
    $('#username').keyup(username_check);
});

function username_check() { 
    var username = $('#username').val();
    if(username == "" || username.length < 6){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
        $('#cross').fadeIn();
    } else {
        jQuery.ajax({
            type: "POST",
            url: "check.php",
            data: 'username=' + username,
            cache: false,
            success: function(response){
                if(response == 1) {
                    $('#username').css('border', '3px #C33 solid'); 
                    $('#tick').hide();
                    $('#cross').fadeIn();
                } else {
                    $('#username').css('border', '3px #090 solid');
                    $('#cross').hide();
                    $('#tick').fadeIn();
                }
            }
        });
    }
}

所以我要做的是让 username_check 像我的其他字段检查器一样返回。我只是在寻求关于我应该把退货和东西放在哪里的帮助。无论我尝试什么似乎都会破坏代码......

到目前为止我所拥有的一切

 if ( !check_username(theForm.username.value) ) valid = false;

任何能帮助我指明正确方向的人都将不胜感激。

Answer 1

问题不在于 jQuery。问题是您正在使用 asynchronous 调用来进行一些验证。 jQuery.ajax 是异步的，这意味着代码在获取 check.php 时将继续执行。换句话说，当响应返回时，username_check() 将已经返回并提交您的表单（或取消提交）。

对于代码的非 AJAX 部分（长度检查），您可以执行 return 就好了：

function username_check() { 
    var username = $('#username').val();

    // NOTE: This is redundant, as "" has length 0
    if(username == "" || username.length < 6){ 
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
        $('#cross').fadeIn();
        return false;   // This will work here
    } else {
        // AJAX stuff
    }
}

不幸的是，其余的变得有点棘手。您真正想要做的是等到完成用户名检查后再提交表单，这意味着您的提交需要进入回调函数（即 AJAX 的 success 部分）。如果你只有一个 AJAX 调用，这还不错。如果您有多个 AJAX 调用，则需要嵌套所有调用（这会使代码花费更长的时间，不是很漂亮，并且在一个失败后不会轻易进行其他检查）或者您需要使用 deferred objects (或类似的东西），这不是微不足道的（但非常有用）。

假设您对用户名有一个 AJAX 调用：

首先，向您的提交按钮添加一个 ID。这样可以更容易地从 jQuery 中引用：

<td><input id="mysubmit" type="submit" value="Register" onclick="return validate(this.form)"/></td>
<td><a href='Index.php'>Login?</a></td>

其次，在所有其他检查之后进行用户名检查，并且仅在其他检查有效时才提交：

function validate(theForm) {
    var valid = true;

    if ( !validateEmail(theForm.emailrec.value) ) valid = false;
    if ( !validatePassword(theForm.passwd.value) ) valid = false;
    if ( !validatePostcode(theForm.postcode.value) ) valid = false;

    // The non-AJAX checks for username length:
    var username = theForm.username.value;
    if ( !validateUsername(username) ) valid = false;

    jQuery.ajax({
        type: "POST",
        url: "check.php",
        data: 'username=' + username,
        cache: false,
        success: function(response){
            if(response == 1) {
                $('#username').css('border', '3px #C33 solid'); 
                $('#tick').hide();
                $('#cross').fadeIn();
            } else {
                $('#username').css('border', '3px #090 solid');
                $('#cross').hide();
                $('#tick').fadeIn();

                // If the other checks were OK, submit the form manually
                if(valid) {
                    $("#mysubmit").submit();
                }
            }
        }
    });

    // ALWAYS return false.  
    // We will submit the form manually if the checks are OK
    // For now, prevent the submit
    return false;
}

有意义吗？

注意事项：

• 您可能希望在单击提交按钮后禁用它（并在失败时重新启用它。否则，如果 AJAX 需要一段时间，用户可能会在其回调之前更改字段值，从而允许错误数据未经检查提交。
• 另一个解决方案是检查onsubmit。 目前，如果用户按下回车键，则不会调用您的检查。这很糟糕！

Answer 2

不确定我是否遵循，您希望函数在验证时返回 true 或 false，对吗？

编辑：我的代码是垃圾，感谢烤了指出这一点。

所以，当你在做一个 ajax 调用时，你不能真正得到它在同一个函数中是否有效（真或假），你可能需要做一些不同的事情......

几个想法； - 使用您的 DOM（向表单字段添加“无效”类或类似的东西，然后检查该值。

-使用全局变量“valid_user”保存验证结果...（我知道全局变量很糟糕，这是一种不好的做法，但是，如果您有截止日期...）

然后，当您验证孔表单时，请检查这些内容，而不是再次调用 username_check。

希望这会有所帮助！