Question

我有一个以下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代码。

如何解决这个问题？

Answer 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;");
   })
});

Answer 2

通过使用此函数在要使用的元素上设置类，可以轻松完成此操作。

将输入字段设为：

<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数据 - *类型并制作如下内容：

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

然后您可以将值与field.attr("data-var");

一起使用

在jQuery中使用'this'引用Parent选择器

2 个答案: