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建议使用类来附加验证器也是一个很好的建议。

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

2 个答案: