使用外部引用调用CoffeeScript文件进行html表单验证

我是一个初学者，第一次使用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>

usernameValidate=->
x=document.getElementById（“用户名”）.value
ptrn=/^[A-z0-9]{5,8}$/
如有必要，测试（x）
document.getElementById（“usrmsg”）.innerHTML=“”
条形宽度=条形宽度+10
document.getElementById（“progress”）.style.width=barwidth+“%”
返回真值
其他的
y=“仅字母数字，长度在5-8个字符之间”
document.getElementById（“usrmsg”）.innerHTML=“”+y
document.getElementById（“progress”）.style.width=barwidth+“%”
document.getElementById（“用户名”）.focus（）
返回错误
条形宽度=0

以及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引导程序作为进度条。 我想要 -要增加有效用户名宽度的进度条 -如果输入不是有效模式，则应显示错误消息

请告诉我哪里出错了。

---

我提前感谢您

首先修复您的缩进，以便您拥有有效的咖啡脚本：

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

@

（又称

此

）在此上下文中应该是

窗口

，因此您应该能够使用

@usernameValidate

---

解决第一个问题需要更多的工作。在这里，你最好的办法是停止假装它是1995年，放弃

onblur

属性，转而使用或使用一个为你这样做的库。如果您这样做，那么2就会消失，因为您可以绑定事件处理程序，而不必污染全局命名空间。

您是否尝试使用Firebug或Chrome中的调试器对其进行调试？如果没有，请尝试单步执行代码，看看会发生什么。变量

barwidth

似乎不合适。当我阅读代码时，它在使用之前没有初始化。这是你真正的缩进吗？让客户编译你的咖啡脚本是个坏主意，你应该在服务器端这样做，这样你只需要做一次。@mu太短了，谢谢你的建议。我非常感谢你的建议。谢谢：）

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