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");我想使用类似的东西$(this)，它指向input[name='username']我也只想为每个输入保留一个方法我想要验证的输入，以便我可以减少我的 JS 代码。

如何解决这个问题？

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 回答