尝试使用 jQuery 动态验证字段 - 自定义函数

Question

我正在开发 jQuery 中的验证功能，但有点卡住了。我有一个工作版本非常冗长，并且充满了我试图避免的硬编码表单值。以下是目前有效的方法：

$(document).ready(function(){
  var fname = $("#formFName");
  var lname = $("#formLName");

  fname.blur(validateFName);
  lname.blur(validateLName);

  function validateFName(){
    if(fname.val().length > 0){
      fname.removeClass("req_error");
      return true;
    }
    else {
      fname.addClass("req_error");
      return false;
    }
  }

  function validateLName(){
    if(lname.val().length > 0){
      lname.removeClass("req_error");
      return true;
    }
    else {
      lname.addClass("req_error");
      return false;
    }
  }
});

这部分对于这两个领域来说工作得很好，但我想将整个东西封装在一个更容易维护的函数中。像这样的：

$(document).ready(function(){

  $("#first_name").blur(validateField("first_name","text"));
  $("#last_name").blur(validateField("last_name","text"));
  $("#email_address").blur(validateField("email_address","email"));

  function validateField(formfield, type){
    var field = $("#" + formfield);
    switch(type) {
      case "text":
        if(field.val().length > 0){
          field.removeClass("req_error");
          return true;
        }
        else {
          field.addClass("req_error");
          return false;
        }
        break;
      case "email":
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(filter.test(field.val())) {
          field.removeClass("req_error");
          return true;
        else {
          field.addClass("req_error");
          return false;
        }
        break;
    }
  }
});

但是，当我这样做时，我在 Firefox 的 JS 错误日志中收到以下错误：

错误：((f.event.special[r.origType] || {}).handle || r.handler).apply 不是函数 源文件：/scripts/jquery-1.7.1.min.js 行：3

不幸的是，该错误的快速谷歌并没有产生任何对我有意义的东西。我已经在各个地方尝试过警报，这样做已经验证了正确的表单字段名称确实在应该的地方传递，但是由于我对 jQuery 相当陌生（并且不擅长 JavaScript），所以我处于这里有点损失。

感谢任何可以为我指明正确方向的人。此外，如果有人认为我以错误的方式处理这件事，我很乐意改变。我尝试使用 jQuery 验证插件，但我也在使用一些动态创建的字段，不幸的是，当涉及隐藏的必填字段时，该插件会阻止访问者提交表单。

Answer 1

听起来你可以通过附加行为而不是特定元素来简化这一点：

<input type="text" id="someId" class="validate-text" />
<input type="text" id="someOtherId" class="validate-email" />

$('.validate-text').live('blur', function()
{
    $(this).removeClass('req_error');
    if($.trim(this.value).length < 1)
       $(this).addClass('req_error');
});

$('.validate-email').live('blur', function()
{
    // Same thing with the email validation logic
});

这样，您不需要将特定的事件处理程序附加到您的元素，而是使用这些处理程序来检查您想要的行为。然后你只需用特定的类标记 HTML 元素来标记你想要的验证模式。

假设我正确理解了您的问题。

Answer 2

您不能将函数调用表达式传递给 .blur()。您可以传递一个匿名函数构造函数：

$("#first_name").blur(function () {validateField("first_name","text");});

或者传递一个函数的名字：

function validateFirstName() {
    validateField("first_name","text");
}

* * *

$("#first_name").blur(validateFirstName));

@Tejs 建议使用类来附加验证器也是一个不错的建议。