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

Trying to dynamically validate fields with jQuery - custom function

本文关键字：自定义函数 动态 验证 字段 jQuery      更新时间：2023-09-26

我正在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] ||{}）.句柄 ||r.handler）.apply 不是一个函数源文件：/scripts/jquery-1.7.1.min.js行： 3

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

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

听起来您可以通过附加行为而不是特定元素来简化此操作：

<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 元素即可标记所需的验证模式。

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

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

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

或者传递函数的名称：

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

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

相关文章：