1

を使用して登録フォームのユーザー名を検証する次のjQueryコードがあります$.post

$("input[name='username']").blur(function() {
    $("#usernm").html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>");
    $.post("validate.jsp", {
        fieldtype : $(this).attr("name"),
        fieldval : $(this).val()
    },
    function(resp) {
        if(resp.trim()!="true")
            $("input[name='username']").addClass("invalidvalue");
        else
            $("input[name='username']").removeClass("invalidvalue");
        $("#usernm").html("&nbsp;");
    })
});

そして現在、フォームの入力ごとに検証しているメソッドブロックがあります$("input[name='username']").addClass("invalidvalue");. JS コードを削減できるように検証したい入力。$(this)input[name='username']

それを解決する方法は？

4

2 に答える 2

1

すべての入力フィールドを検証するには、次のようなものを使用できます。

//Mapping of input elements and its 'loading' elements 
var inputMap = { 'username' : 'usernm' };

$("input").blur(function() {
   var inputName = $(this).attr('name');
   var that = this;

   $( "#"+inputMap[inputName] ).html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>");       
   $.post("validate.jsp", {
       fieldtype : inputName,
       fieldval : $(this).val()
   },
   function(resp) {
       if(resp.trim()!="true")
           $(that).addClass("invalidvalue");
       else
           $(that).removeClass("invalidvalue");
       $("#"+inputMap[inputName]).html("&nbsp;");
   })
});
于 2012-04-07T07:56:12.590 に答える
0

これは、この関数で必要な要素にクラスを設定することで簡単に実行できます。

入力フィールドを次のようにします。

<input type="text" name="username" class="validate">
<input type="password" name="password" class="validate">

jQuery コード

$(".validate").each(function(){
  $(this).blur(function(){
    var field = $(this);
    field.addClass("loading"); //Make a class for loading behavior if possible
    $.post(
      "validate.jsp",
      {  fieldtype:field.attr("name"),
         fieldval :field.val()
      },
      function(resp) {
        field.removeClass("loading"); //see on top
        if(resp.trim()!="true") {
          field.addClass("invalidvalue");
        }
        else {
          field.removeClass("invalidvalue");
        }
      }
   });
});

いくつかのフィールドにいくつかの特別な変数が必要な場合は、HTML の data-* タイプを使用して、次のように作成できます。

<input name="username" class="validate" data-var="blabla">

そして、その値を次のように使用できますfield.attr("data-var");

于 2012-04-07T08:06:27.730 に答える