jQuery 表单验证设置

Question

我正在构建一个基本的 jQuery 表单验证器。下面的代码只是为了验证名称。我有几个功能来验证邮件、密码、信用卡、日期等。我希望用户能够轻松编辑错误消息和 classes。假设用户想要更改 class "error" 或 "success" 的名称。现在用户需要在代码中的任何地方搜索和替换 "error" 或 "success".

有没有办法在代码顶部使用数组或对象来编辑每个 if 语句的错误消息，并应用 classes？

类似于此处显示的内容：http://learn.jquery.com/plugins/basic-plugin-creation/#accepting-options（但在代码顶部，函数外部）。或者我可以使用相同的方法但像这样输入（在函数之外，在文件的顶部）？

var settings = $.extend({
  color: "#556b2f",
  errorClass: "error"
}, options );

我还希望用户能够将 ID 和 classes 直接添加到表单元素并在设置 "required" 中键入 "true"，这样表单元素将是必需的.有什么好的方法吗？

var name = $("[data-name]"); 
var nameMsg = $("#nameMsg");

name.on("blur", function() { $(this).validateName() });

$.fn.validateName = function() { 
  if(name.val().length < 5) { 
      name.removeClass("success") 
          .addClass("error"); 

      nameMsg.removeClass("success") 
             .addClass("error") 
             .text("Not that short, at least 5 characters.");

      return false; 
  } else { 
      name.removeClass("error") 
          .addClass("success"); 

      nameMsg.removeClass("error") 
             .addClass("success")
             .html("Correct");

      return true;
  }
}

解决方案

var defaults = {
    errorClass: "error",
    successClass: "success",
    successMessage: "<i class='fa fa-check-circle'></i>",
    errorMessageName: "Not that short, at least 5 characters.",
};

var settings = $.extend({}, defaults);

特别感谢 Martin Adámek 的帮助！

Answer 1

$.extend 只是创建与两个参数的值合并的新对象，您可以使用它来扩展用户给定的默认选项对象（任何您想要的）。

不知道我是否理解正确，这是你想要的吗？

var defaults = { // maybe you do not need extend at all? 
  errorClass: "error",
  successClass: "success",
  messageError: "Not that short, at least 5 characters.",
  messageCorrect: "Correct"
};

var name = $("[data-name]"); 
var nameMsg = $("#nameMsg");

name.on("blur", function() { $(this).validateName() });

$.fn.validateName = function() { 
  var userOpts = {...}; // you can store it eg in data attribute on the element
  // extend options with user given values
  options = $.extend(defauts, userOpts);

  if(name.val().length < 5) { 
      name.removeClass(options.successClass) 
          .addClass(options.errorClass); 

      nameMsg.removeClass(options.successClass) 
             .addClass(options.errorClass) 
             .text(options.messageError);

      return false; 
  } else { 
      name.removeClass(options.errorClass) 
          .addClass(options.successClass); 

      nameMsg.removeClass(options.errorClass) 
             .addClass(options.successClass)
             .html(options.messageCorrect);

      return true;
  }
}

用户给定的选项将存储为 JSON 字符串（以允许与默认选项合并），因此您需要先调用 JSON.parse() on。

编辑：

选项示例 JSON 数据属性中的对象：

HTML:

<input type="text" data-options='{"messageCorrect": "Bingo! That is the right choice!", "errorClass": "my-error-class"}' ...>

然后在 $.fn.validateName() 中，您只需执行以下操作：

var userOpts = JSON.parse($(this).data('options'));

jQuery 表单验证设置

jQuery settings for form validation

javascript

validation

settings

jquery