1

Javaなどの言語やQtforC ++などのGUIフレームワークでは、ユーザーが変更できないテキストのブロック(ラベルウィジェットなど)へのハンドルを取得できますが、プログラムは、満たされている条件に基づいて変更できます。いくつかのJavaScriptコード内からHTMLWebページで同じことを実行できるようにしたいと思います。

たとえば、ユーザーの資格情報を入力するためのWebページについて考えてみます。クレデンシャルが無効な場合は、完全に新しいページをロードせずに、現在のWebページにメッセージを表示したいと思います。

HTMLテキストボックスまたはテキストエリアを使用して動作するようになりました。無効に設定され、一部の表示スタイルの変更(CSS経由)でのみ読み取り可能です。変更により、一部のJavScriptコードが実行され、これらのテキストボックスまたはテキストエリアの値フィールドが変更される可能性があります。これは問題なく機能しますが、正しくないようです。これを達成するためのより正統な方法はありますか?

4

3 に答える 3

1

もちろん。これを処理するライブラリがいくつかあります。

フォームの検証を求めている可能性があります。もしそうなら、jQueryとjQueryの検証拡張ライブラリを試してください:デモ

または、より一般的なオブザーバーパターンを求めている場合もあります。その場合は、backbone.jsやknockout.js(ember、agility、angular、spine)などのJavaScript用の多くのMVVM / MVCライブラリの1つを試してください:jsfiddle

編集:必要なのが標準形式の検証だけである場合は、コードを記述せずにjQuery検証で実行できることにも注意してください。検証ルールが何であるかを示すプロパティをHTML要素自体に直接追加するだけです。残念ながら、HTML5データ属性は作成された時点では存在していなかったため、検証ルールをCSSクラスとして適用します。

編集2:jQuery検証は、すぐに使用できる状態で、クレデンシャルやユーザー名がすでに存在するシナリオなどのリモート検証をサポートしていることにも注意してください:デモまたはドキュメント

于 2012-09-01T05:22:00.593 に答える
1

jQuery.submit()を使用します。これを使用すると、イベントハンドラーを「送信」JavaScriptイベントにバインドしたり、要素でそのイベントをトリガーしたりできます。

例:

$("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });

jQueryを使用.toggle()してdivを表示/非表示にすることもできます。

このW3Cの記事を読んで、W3による推奨事項をよりよく理解し、クライアント側の検証を提供し、DOMを介してエラーテキストを追加します(少し古くなっています)

于 2012-09-01T05:25:30.073 に答える
0

jQueryを試してみてください.change();

HTML入力にIDがあると仮定します。

<input type='text' id='idOfTheField' name='email'>

試してみてください:

$('#idOfTheField').change(function(){

  //Do stuff with the value.
  //Wich is $('#idOfTheField').value() by the way.

});

Webサーバーでデータを操作するには、次のようにAJAX呼び出しを実行する必要があります。

$.ajax({
  url: "parse.php",
  data: {
      email:$('#idOfTheField').value()
  }
}).done(function() { 
  // Add the CSS class ".valid" that makes the text field green, for example.
  $('#idOfTheField').addClass("valid"); 
});
于 2012-09-01T05:13:57.340 に答える