Question

我编写了一个脚本来验证通过表单提交的用户名。如果用户名大于5个字符，则应向用户显示一些消息。我得到的错误是

：未捕获的TypeError：无法读取未定义的属性“length” at checkusername（eventobject.html：24）在HTMLInputElement。（eventobject.html：18）

我使用过'模糊'事件。

代码是：

buildscript {
    ext {
        springBootVersion = '1.5.4.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'org.sonarqube'
apply plugin: "jacoco"
apply plugin: "java"
apply plugin: "war"
apply plugin: "org.springframework.boot"


sonarqube {
  properties {
    property "sonar.projectName","Spring4WebService Code Coverage Demo"
    property "sonar.projectKey", "org.sonarqubeJacocoCodeCoverage"
    property "sonar.reportPath" , "${project.buildDir}/jacoco/test.exec"
  }
}


test{
  ignoreFailures = true
}


ext {
    jacocoVersion = '0.7.6.201602180812'
}

sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenCentral()
}


sourceSets {
  main.java.srcDir "src/main/java"
  test.java.srcDir "src/test/java"
}

springBoot {
  mainClass = "com.concretepage.config.WebAppInitializer"
}

dependencies {
    compile('org.springframework.boot:spring-boot-starter-web','com.fasterxml.jackson.core:jackson-databind')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

jacoco{
  toolVersion = "${jacocoVersion}"
}

jacocoTestReport {
 reports{
  html.enabled=true
  xml.enabled=true
  csv.enabled=true
 }
}

当我编写没有参数的相同事件处理程序时，上面的代码工作正常。不传递参数的事件处理代码如下所示：

 <html>

<head>
</head>

<body>

  <form>
    <label for="text">Username:</label>
    <input type="text" id="text" />
    <p id="para"></p>

  </form>

  <script>
    var el=document.getElementById("text");
    el.addEventListener('blur',function(){checkusername(5);},false);

    var msg=document.getElementById("para");

    function checkusername(min)
    {
     if(this.value.length<min)
     {
       msg.textContent="username less than 5 characters";
     }
     else
     {
      msg.textContent='';
     }
    }

  </script>
</body>


</html>

Answer 1

您可以使用Function.prototype.bind()设置this第一个参数和要在函数体内使用的参数，在第二个到第N个参数中传递给.bind()

el.addEventListener('blur',checkusername.bind(el, 5 /*, N */),false);

Answer 2

你可以试试这个。我希望它会起作用。

<html> 
<body>
<form>
    <label for="text">Username:</label>
    <input type="text" id="text" />
    <p id="para"></p>
</form>

<script>
    let element=document.getElementById("text");
    element.addEventListener('blur',function(){checkusername(5);},false);

    let msg=document.getElementById("para");

    function checkusername(min)
    {

        if(element.value.length<min)
        {
            msg.textContent="username less than 5 characters";
        }
        else
        {
            msg.textContent='';
        }
    }

</script>    
</body>    
</html>

Answer 3

在对事件调用方式进行一些研究后，我遇到了上述问题的两种解决方案。再次查看错误消息： -

:Uncaught TypeError: Cannot read property **'length'** of undefined at **checkusername**

从上面的消息中可以清楚地看到checkusername（）函数内部发生了错误。而实际的错误正在发生，因为长度应用于 undefined 变量，在此上下文中，此。

在此事件调用中未明确此的原因：

1.在常规函数调用中（如下所示），关键字 this 与调用函数的事件相关联。

el.addEventListener（ '模糊'，checkusername（），假）; //无参数调用

此处，event直接调用函数 checkusername（）。简而言之，此持有对 el 的引用，即： - ＆GT; EL。在这种事件调用中，在这个上使用长度属性是有意义的，因为它有一些东西。

2.在涉及传递参数的函数调用（问题中的问题）中，根据 JavaScript 标准不支持常规函数调用。 JavaScript定义函数调用需要嵌入匿名函数中（如下所示）：

el.addEventListener（ '模糊'，函数（）{checkusername（5）;}，假）; //用参数调用。

这里，event调用匿名函数，然后调用 checkusername（）。因此， this 不引用任何内容， undefined < /em>。因此，在 checkusername 内的此上调用 length 会返回错误。

因为不能使用，所以使用以下技术。

方法1：：将 el 作为参数列表的一部分传递。

var el=document.getElementById("text"); el.addEventListener('blur',function(){checkusername(el,5);},false); var msg=document.getElementById("para"); function checkusername(el,min) { if(el.value.length<min) { msg.textContent="username less than 5 characters"; } else { msg.textContent=''; } }

方法2 ：全局声明 el 。

var el=document.getElementById("text"); el.addEventListener('blur',function(){checkusername(5);},false); var msg=document.getElementById("para"); function checkusername(min) { if(el.value.length<min) { msg.textContent="username less than 5 characters"; } else { msg.textContent=''; } }

在Jon Duckett的 Javascript＆amp; JQuery一书中找到这些解决方案。。 useful link

希望这有用。 :)我在stackoverflow中的第一个答案。

Answer 4

试试这个 -

  <!DOCTYPE html>
     <html> 
        <body>
        <form>
            <label for="inputText">Username:</label>
            <input type="text" id="inputText" />
            <p id="message"></p>
        </form>

        <script>
            var el=document.getElementById("inputText");
            el.addEventListener('blur',function(){checkusername(5);},false);

            var msg=document.getElementById("message");

            function checkusername (min) {
                if(this.el.value !== (undefined || null) && this.el.value.length < min) {
                    msg.textContent="username less than 5 characters";
                } else {
                    msg.textContent='';
                }
            }

        </script>    
    </body>    
</html>

Javascript：未捕获的TypeError：无法读取未定义的属性“长度”

4 个答案: