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运行之前进行初始化。

我发现另外两个可能的问题：

您的CoffeeScript可能会在 <input>之后被编译为JavaScript浏览器。

<script type="text/coffeescript">可能将所有内容包装在自执行函数包装器中，就像通常的coffee命令一样。

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

@usernameValidate = -> ... # or window.usernameValidate = -> ...
此上下文中的
@（AKA this）应为window，因此您应该可以使用@usernameValidate。

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

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

1 个答案: