2

私は初めての HTML 検証を行う CoffeeScript の初心者です。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 ブートストラップを使用しました。欲しい - 有効なユーザー名に対してプログレス バーの幅が増える - 入力が有効なパターンでない場合にエラー メッセージが表示される

どこが間違っていたか教えてください。よろしくお願いします

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実行前に初期化されるため、問題にはなりません。

他に 2 つの問題が考えられます。

  1. あなたのCoffeeScriptは、あなたが見られた後、ブラウザ用のJavaScriptにコンパイルされている可能性があります.<input>
  2. <script type="text/coffeescript">coffee通常のコマンドと同じように、おそらくすべてを自己実行関数ラッパーでラップします。

2 つ目は、関数をグローバル名前空間に強制することで修正できます。

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

@(別名this) このコンテキストでは、windowを使用できるはずです@usernameValidate。

最初の問題を解決するのは、もう少し手間がかかります。ここでの最善の策は、1995 年のふりをするのをやめて、そのonblur属性を放棄するaddEventListenerか、それを行ってくれるライブラリを放棄することです。このルートに進むと、グローバル名前空間を汚染することなくイベントハンドラーをバインドできるため、 2はなくなります。

于 2013-07-08T06:04:58.857 に答える