2

我是 CoffeeScript 的初学者，正在做我的第一个 html 验证。我无法验证我的 html 表单。代码如下：

<script type="text/coffeescript">
usernameValidate = ->
  x = document.getElementById("username").value
  ptrn = /^[A-z0-9]{5,8}$/
    if ptrn.test(x)
      document.getElementById("usrmsg").innerHTML = ""
      barwidth = barwidth + 10
      document.getElementById("progress").style.width = barwidth + "%"
      return true
    else
      y = "Only Alpha Numeric and Length between 5-8 chars"
      document.getElementById("usrmsg").innerHTML = "<img src='./icons/error.png'>" + y
      document.getElementById("progress").style.width = barwidth + "%"
      document.getElementById("username").focus()
      return false
barwidth = 0
 </script>
<script type="text/javascript" src="js/coffee-script.js"></script>

和html：

<input type="text" name="uname" placeholder="User Name" id="username" onblur="usernameValidate()">
<span id="usrmsg"></span>
<div class="progress progress-striped active" id="progressbar">
<div class="bar" id="progress"></div>
</div>

我已经使用 twitter bootstrap 作为进度条。我想要 - 为有效用户名增加宽度的进度条 - 如果输入不是有效模式，则应显示错误消息

请建议我哪里出错了。我提前谢谢你

4

1 回答 1

1

首先修复您的缩进，以便您拥有有效的 CoffeeScript：

usernameValidate = ->
  x = document.getElementById("username").value
  ptrn = /^[A-z0-9]{5,8}$/
  if ptrn.test(x)
    document.getElementById("usrmsg").innerHTML = ""
    barwidth = barwidth + 10
    document.getElementById("progress").style.width = barwidth + "%"
    return true
  else
    y = "Only Alpha Numeric and Length between 5-8 chars"
    document.getElementById("usrmsg").innerHTML = "<img src='./icons/error.png'>" + y
    document.getElementById("progress").style.width = barwidth + "%"
    document.getElementById("username").focus()
    return false
barwidth = 0

我会移到barwidth顶部，但这无关紧要，因为变量无论如何都会被提升到顶部，并且它将在usernameValidate运行之前被初始化。

我看到另外两个可能的问题：

  1. 您的 CoffeeScript 可能会在您被看到后被编译为浏览器的 JavaScript 。<input>
  2. <script type="text/coffeescript">可能就像通常的coffee命令一样将所有内容包装在自执行函数包装器中。

第二个可以通过强制你的函数进入全局命名空间来修复：

@usernameValidate = -> ...
# or
window.usernameValidate = -> ...

@（AKA this）在这种情况下应该是window这样你应该能够使用@usernameValidate.

解决第一个问题需要更多的工作。您最好的选择是停止假装它是 1995 年，并放弃该onblur属性以支持addEventListener或为您执行此操作的库。如果你走这条路，那么2就会消失，因为你可以绑定你的事件处理程序，而不必污染全局命名空间。

于 2013-07-08T06:04:58.857 回答