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

Question

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

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

Answer 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 可能会在您的 <input> 之后 被编译成适用于浏览器的 JavaScript已经看到了。
2. <script type="text/coffeescript">就像通常的 coffee 一样，可能将所有内容都包装在一个自执行函数包装器中命令执行。

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

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

@ (又名 this )在这种情况下应该是 window所以你应该可以使用 @usernameValidate .

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