我正在构建一个基本的jQuery表单验证器。下面的代码只是为了验证名称。我有几个功能来验证邮件,密码,信用卡,日期等。我希望用户能够轻松编辑错误消息和类。假设用户想要更改类“错误”或“成功”的名称。现在,用户需要在代码中的任何地方搜索并替换“错误”或“成功”。
有没有办法在代码顶部使用数组或对象来编辑每个if语句的错误消息,并应用这些类?
类似于此处显示的内容:http://learn.jquery.com/plugins/basic-plugin-creation/#accepting-options(但在代码的顶部,在函数外部)。或者我可以使用相同的方法但是这样输入(在函数外部,在文件的顶部)?
var settings = $.extend({
color: "#556b2f",
errorClass: "error"
}, options );
我还希望用户能够将ID和类直接添加到表单元素,并在“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);
特别感谢给MartinAdámek提供帮助!
答案 0 :(得分: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()。
修改强>
数据属性中的选项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'));