Jquery：检查变量是否在 keyup() 函数之后定义答案

【问题标题】：Jquery: check if variable is defined after keyup() functionJquery：检查变量是否在 keyup() 函数之后定义
【发布时间】：2016-05-26 12:00:17
【问题描述】：

我正在使用jquery 函数keyup() 创建注册表单，例如，如果输入正确，我将其分配给一个 txtuname 变量，然后我按下注册按钮，我需要知道所有表单变量都是正确和定义的。下面的代码不起作用：

<script type="text/javascript">      
$("document").ready(function() {
  $("#txtuname").keyup(function() {
    if ($("#txtuname").val().length < 6) {
      jQuery("label[for='txtuname']").text("user name is too short");
    }
    if ($("#txtuname").val().length >= 6) {
      var txtuname = $("#txtuname").val();
      jQuery("label[for='txtuname']").text("");
    }
  });
  $("#submitRegistration").click(function() {
    if (typeof txtuname == 'defined') {
      alert("defined");
    }
    if (typeof txtuname == 'undefined') {
      alert("undefined");
    }
  });
});
</script>

【问题讨论】：

typeof txtuname =='defined' 改为typeof txtuname = "string"
typeof txtuname =='undefined' 改为undefined === txtuname
将txtuname放在script标签之后

标签： javascript jquery onkeyup

【解决方案1】：

修改后的代码。这段代码的要点是txtuname 应该在keyup 事件监听器和click 监听器的两个范围内都可见。因此，如果有更多元素，请创建 Validation 对象 并检查所有值是否已设置且正确。是的，在您的代码中使用 or $ 或 jQuery。

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

    var txtuname = null;

    $("#txtuname").keyup(function(){
        if($("#txtuname").val().length<6){
            jQuery("label[for='txtuname']").text("user name is too short");
        }

        if($("#txtuname").val().length>=6){
            txtuname=$("#txtuname").val();
            jQuery("label[for='txtuname']").text("");
        }
    });

    $("#submitRegistration").click(function(){
        if( txtuname == null || txtuname.length < 6)  ){
            alert("incorrect");
        }
        else{
            alert("correct");
        }

    });
});

更新使用@Rhumborl 的注释检查变量，谢谢

【讨论】：

我只会在初始化时将其设置为null，当无效时，只需检查if(txtuname === null)，而不是重复逻辑

【解决方案2】：

我会将验证逻辑放在一个函数中并调用它，您可以根据您的特定要求对其进行更新，并且只执行一次：

function isValidName(field) {
  var myName = field.val().trim();
  // some of this is redundant but just to show possibilities
  var isValid = myName.length && myName.length >= 6 && myName && undefined !== myName && myName != " ";
  var myLabel = $("label[for='" + field.attr('id') + "']");
  if (isValid) {
    myLabel.text("");
  } else {
    myLabel.text("user name is too short");
  }
  return isValid;
}
$("document").ready(function() {
  $("#txtuname").keyup(function() {
    isValidName($(this));
  });
  $("#submitRegistration").click(function() {
    var nameIsValid = isValidName($("#txtuname"));
    if (nameIsValid) {
      alert("valid");
    } else {
      alert("undefined or invalid");
    }
  });
});

【讨论】：

我认为这个undefined !== myName有问题，因为每次它给我一个答案用户名太短，如果我从条件中删除undefined !== myName，那么它就可以了。
这应该与(typeof myName !== "undefined") 具有相同的效果，除非未定义为可以手动更改。

【解决方案3】：

您在代码中使用 $ 以及 jQuery window.jQuery 对象。不要同时使用两个，你可以检查两个

jQuery("document").ready(function() { jQuery("#txtuname").keyup(function(){ if(jQuery("#txtuname").val().length<6){

    jQuery("label[for='txtuname']").text("user name is too short");
}

if(jQuery("#txtuname").val().length>=6){

var txtuname=jQuery("#txtuname").val();
jQuery("label[for='txtuname']").text("");

}
});

jQuery("#submitRegistration").click(function(){

if(typeof txtuname =='defined'){
    alert("defined");
}
if(typeof txtuname =='undefined'){
    alert("undefined");
}

});
});

或者使用 $ 符号替换 jQuery。它会起作用的。

【讨论】：

【解决方案4】：

用以下条件替换代码 -

if( typeof txtuname !== 'undefined' && txtuname.length >= 6)  ){
  //proceed further
}else{
   alert('Please correct entries.');
   return false;
}

【讨论】：

【解决方案5】：

你也可以试试这个方法......

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

var txtuname;

$("#txtuname").keyup(function(){
    if($("#txtuname").val().length<6){
        jQuery("label[for='txtuname']").text("user name is too short");
    }

    if($("#txtuname").val().length>=6){
        txtuname=$("#txtuname").val();
        jQuery("label[for='txtuname']").text("");
    }
});

$("#submitRegistration").click(function(){
    if(typeof txtuname=="undefined"){
        alert("undefined");
    }
    else{
        alert("defined");
    }
});
});

【讨论】：