1

1つの入力フィールドを持つフォームフィールドがあります。

ユーザーが入力を完了するとすぐに、ajax呼び出しを行い、サーバー側で入力を検証する必要があります。

キーアップ、フォーカスアウト、キーダウン、マウスアップのイベントに疲れましたが、期待どおりに機能しないようです。これを解決するために選択するのに最適なキーボードイベントを提案してください。入力が空白の場合は、エラーメッセージも表示されます。

4

4 に答える 4

0

onchangeイベントはあなたが必要とするものかもしれません。

onchangeは、入力要素の値に加えられた変更をリッスンしますが、キーイベントは、キーボードで実行されたアクションのみを登録します（たとえば、Escを押して放すことも有効なトリガーです）。

しかし、ここでは実際の質問は実際には得られません。探しているのは正規表現だと思います。

正規表現は、データが指定された条件を満たすかどうかを確認するために使用できるパターンです。例えば：

'/[a-zA-Z0-9\-]{5, 10}/'

テキストを決定するために使用できるのは英数字のみで、長さは5〜10文字です。この場合、ハイペン（-）も使用できます。

これに関する情報は、Web上のどこにでもあります。

また、質問をもう少し説明的に投稿したり、使用しているコードのサンプルを追加したりすることについて考えてみてください。これはおそらくもっと役立つ答えを刺激するでしょう。

敬具、

D。

于 2012-05-28T13:47:50.563 に答える
0

サンプルページを表示して、ページコードに正しく反映させます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

または、ここからさらに多くの概念を取り入れることができます：http ://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

于 2012-05-28T13:49:00.353 に答える
0

http://jsfiddle.net/landau/zKrYS/

「期待どおりに動作しない」とはどういう意味かよくわかりませんが、例を示します。

$("form").on("submit", function(e) {
    e.preventDefault();
    var val = $("input").val().trim();
    if (!val) {
        alert("please fill in the field");
        return;
    }
    var jqxhr = $.ajax({
        url: "/echo/json/",
        data: {
            value: val
        },
        type: "post"
    }).done(function(data, status, xhr) {
        console.log(data, status, xhr);
    });
});​
于 2012-05-28T13:49:53.620 に答える
0

おそらく探しているイベントはblur（）イベントです。これは、ユーザーが入力フィールドを離れたときに呼び出されます（たとえば、Tabキーを押すか、次の入力をクリックします）。

例：

   $(document).ready(function(){
        $('input#myInput').blur(function(){
            myValidator($(this), $(this).val());
        });
    });

    function myValidator($element, value)
    {
        // Example regex to sucessfully match a value of at least 4 digits
        if (!value.match(/^[0-9]{4,}$/)
        {
            // In this case I'm adding an error class to the input,
            // but feel free to do anything you like
            $element.addClass('error');
        }
    }

編集：

AJAXを介した検証は、HTTPリクエストを簡単に停止したり、JavaScriptを完全に無効にしたりできるため、非常に悪い習慣です（個人的には、不要なhttpリクエストを避けようとしています）。

最初にクライアント側（JavaScript / jQueryのみ）をチェックし、送信されたときにサーバー側（PHP / ASPを使用）をダブルチェックすることをお勧めします。

于 2012-05-28T14:07:55.150 に答える