从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

不知道如果我遵循，你希望函数返回true或false，如果验证，对不对？

编辑：我的代码是废话，感谢烤指出。

因此，当你在做一个AJAX调用你真的不能得到，如果它是有效的（true或false）在相同的功能，你可能需要做不同的事情....

一对夫妇的思路; - 使用你的DOM（添加一个“无效”类或类似的东西到表单字段，然后检查该值。

- 使用全局变量“valid_user”保存验证的结果...（i知道全局变量吸这是一个不好的做法，但是，嘿，如果你有一个最后期限？）

那么，当你在证实洞形式，检查这个事情，而不是再次调用username_check。

希望这有助于！

Answer 2

问题不是jQuery。问题是，您正在使用异步调用做一些验证。 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目前，如果用户按下回车键不会调用您的支票，这是不好的！