Javascript 拉动一组对象
我目前有一个验证脚本,它有一组Javascript 拉动一组对象,javascript,arrays,validation,object,Javascript,Arrays,Validation,Object,我目前有一个验证脚本,它有一组元素,这些元素存储在具有“id”、“type”、“isRequired”和“isValid”等属性的对象中。我目前有一个setup()函数,可以执行以下操作: function setup(obj) { obj.getElement().onkeyup = function() {validate(obj)} } 为了在所有输入对象上运行此setup()函数,我需要执行以下addEvents()函数 function setEvents() {
元素,这些元素存储在具有“id”、“type”、“isRequired”和“isValid”等属性的对象中。我目前有一个setup()
函数,可以执行以下操作:
function setup(obj) {
obj.getElement().onkeyup = function() {validate(obj)}
}
为了在所有输入对象上运行此setup()
函数,我需要执行以下addEvents()
函数
function setEvents() {
setup(firstName)
setup(lastName)
setup(email)
setup(dateOfBirth)
}
我正在帮助创建一个只有表单的多个页面的系统,所以如果我不必为每个对象键入这些页面,我更愿意这样做是否有一种方法可以收集基于特定对象模板的所有对象的数组?通过这种方法,我可以在数组中循环,并在单个函数中对每个对象应用设置。如果没有,还有其他选择吗
(另外,我最近问了很多面向对象的问题(哦,我有时会崩溃),因为这是我第一次处理对象)
---编辑---
我所指的对象模板如下所示:
function input(id,isRequired,type) {
this.id = id
this.isRequired = isRequired
this.type = type
}
然后是一个
firstName = new input('firstName',true,'alpha')
与大多数javascript问题一样,最简单的方法是使用jQuery之类的库。如果您有一种独特的方式使用css选择器来区分这些对象(例如,它们都有类“validate”,或者它们是页面上唯一的输入[type=“text”]字段或其他内容),那么您可以执行一个简单的选择,如
$('.validate')
,以获得所有这些对象的数组。当然,您可以使用javascript获得这个数组,但它有点复杂。一旦你有了数组,你可以在元素上循环,或者你可以做一个简单的绑定,比如$('.validate')。更改(validate)代码>,它将在类为“validate”的dom元素发生更改时调用validate()方法
编辑:很明显,我不知道你想要完成什么,但是如果你是网络编程新手,请注意,无论你在客户端(即浏览器中)做什么,所有的验证都应该在服务器端完成。Javascript验证通常只是用于用户友好,而不是实际验证您的输入,因为我可以轻松地关闭Javascript或将验证重新定义为function validate(){}
,并出于任何原因绕过Javascript验证
第二次编辑:所以我不确定这个答案是否100%符合您的要求,但不管怎样,最好知道。我认为您的问题在于onkeyup范围内的obj未定义
function setup(obj) {
//obj is desired
obj.getElement().onkeyup = function() {validate(obj) //obj is undefined because onkeyup is the new scope of this function
}
相反,您可以这样做:
function setup(obj) {
obj.getElement().onkeyup = function() {validate(this)
}
根据您的示例判断,您没有使用jQuery。仅出于这个原因,我将投票支持你。在相同的注释中,在您对JS非常满意,以及如何做事情之后,真正考虑使用框架或保存脚本,这样您就不必为每个项目重新创建轮子。
实际上,您可以利用DOM为您带来好处
您页面中的所有表单都可以通过document.forms[index]
引用。或者,您也可以使用document.formName
引用命名表单
下面是使用后者的示例
更新
阅读您的更新以及您需要一种创建输入对象和设置验证的方法的事实。我用不同的方法更新了我的小提琴
使用id保存有关元素的验证信息,然后addValidation
函数将id还原为其基本形式,以便您可以在整个应用程序中正常使用它
唯一的要求是在页面加载后第一件事就是添加验证。所以我先修改身份证
该解决方案也是JS安全的,这意味着如果用户没有JS,除了没有验证之外,不会发生其他事情。正如我在评论中所说,您可以在创建数组时将元素添加到数组中:
var inputs = [];
var firstName = new input('firstName',true,'alpha');
inputs.push(firstName);
这还不太方便。但您可以创建另一个对象来管理所有这些:
var InputManager = {
elements: [],
create: function(/* arguments here */) {
var n = new input(/* arguments here */);
this.elements.push(n);
return n;
},
setup: function() {
for(var i = this.elements.length; i--;) {
(function(obj) {
obj.getElement().onkeyup = function() {validate(obj)};
}(this.elements[i]));
}
}
};
您可以使用它:
var firstName = InputManager.create('firstName',true,'alpha');
// etc.
InputManager.setup();
沿着这条线的东西。我认为这将是一种非常面向对象的方式。如果您有一组对象,您通常会有另一个对象来处理应在所有这些对象上执行的功能。对象模板是什么意思?您可以在创建这些元素对象时直接创建数组。@Felix请检查我的编辑,以便您建议在我最初创建firstName对象时创建数组?用不同的解决方案更新了我的答案。如果你想有所不同,考虑评论,我可能会更新它。不。匿名函数是一个闭包,它关闭在obj
上。而事件处理程序中的这个
指的是DOM元素,而不是“输入”对象。请记住:函数总是可以访问更高的作用域。谢谢你的回复,我确实想避免使用jQuery,而解决方案并不是我想要的,但是感谢您对服务器端脚本(我目前没有涉及)的详细介绍,我从未想过要关闭javascript以绕过验证^顺便说一句,我想你回答了我的问题。我只是在读你是怎么做到的。您对InputManager使用了什么类型的变量?我不熟悉您用来创建函数方法的语句。@Farren:这是对象文字符号。例如,var a={}
使用空对象初始化a
<代码>元素
、创建
和设置
是对象的属性(在我的代码中)。由于函数是第一类对象,因此可以像指定任何其他值一样指定它们。您也可以这样做:vara={};a、 setup=function(){}
而不是var a={setup:function(){}
(这类似于您所做的onkeyup
赋值)。这只是一种更全面的写作方式。好吧,我只是好奇。我可以用