如何使用javascript对象验证表单字段？

我正在尝试使用javascript对象值进行一些简单的表单验证。我知道这不是“理想的”，但我只是在用一种简单的形式工作，不需要铁板一块

请参见我的小提琴示例：

我试图确保每个表单字段都有一个值。如果是，请将

myObj.fieldID

的值设置为

yes

然后，在提交表单时，检查每个现有的

myObj.XXX

，确保它们的值都是

yes

在我的示例中，我在创建对象时遇到了问题，我不知道在按下submit按钮时如何循环所有对象，而不指定每个对象的名称

下面是链接到上面的JSFIDLE示例中的代码：

<script>
$(document).ready(function () {
    var myObj = {};
    $("input.checkblank").blur(function () {
        var inputID = $(this).attr("id");
        var contents = $("input#" + inputID).val();
        if (contents == "") {
            $(myObj).data(inputID, "no");
        } else {
            $(myObj).data(inputID, "yes");
        }
    });
    $("#verify").click(function () {
        if (myObj.first && myObj.second == "yes") {
            // ***** Trying to get it to scan through ALL existing myObj's and make sure all their values are "yes" *****        
            $('.results').text('all good');
        } else {
            $('.results').text('not good');
        }
    });
});
</script>

<input type="text" name="first" id="first" class="checkblank"><br />
<input type="text" name="second" id="second" class="checkblank">
<a href="#" id="verify">check</a><br />
<p class="results"> </p>

$（文档）.ready（函数（）{
var myObj={}；
$（“input.checkblank”）.blur（函数（）{
var inputID=$（this.attr（“id”）；
var contents=$（“输入#“+inputID）.val（）；
如果（内容==“”）{
$（myObj）.数据（输入“否”）；
}否则{
$（myObj）.data（输入“是”）；
}
});
$（“#验证”）。单击（函数（）{
如果（myObj.first&&myObj.second==“是”）{
//****试图让它扫描所有现有的myObj，并确保它们的所有值都是“是”****
$（'.results'）.text（'all good'）；
}否则{
$（'.results'）.text（'notgood'）；
}
});
});

​

---

​

您将字段信息存储在jQuery数据中，并尝试稍后在不同的位置检查它们

var obj = {}
$(obj).data('a','1');
console.log(obj.a); //this will log null, cause there's no attribute 'a' in 'obj'
console.log($(obj).data('a')); //this will log '1' :]

相反，您应该将数据存储在本机对象的属性中，如下所示：

var obj = {}
obj['a'] = '1'; //obj.a = '1' work's too
console.log(obj.a); //now it log '1' :]

$("#verify").click(function() {
    var allFieldsOK = false;
    for ( var field in checkedFields ) {
        if ( !(allFieldsOK = checkedFields[field] ) ) break;
    }
    $('.results').text(  allFieldsOK ? 'all good' : 'not good' );
});

此外，您的验证功能是错误的。。它只检查

myObj中是否存在
first
，以及
second
是否存在且等于
“yes”
。因此，您的验证功能应该如下所示：

var obj = {}
obj['a'] = '1'; //obj.a = '1' work's too
console.log(obj.a); //now it log '1' :]

$("#verify").click(function() {
    var allFieldsOK = false;
    for ( var field in checkedFields ) {
        if ( !(allFieldsOK = checkedFields[field] ) ) break;
    }
    $('.results').text(  allFieldsOK ? 'all good' : 'not good' );
});

下面是对JSFIDLE的更新，它是为您的目的而工作的，如果您使用类
checkblank
：]添加更多的输入字段，它应该会工作
更换此

$("#verify").click(.........});

用这个

$("#verify").click(function() {
    var flag=true;
    $('.checkblank').each(function(){    //check all elements with class checkblank
         if($(this).val().length==0)     //set flag false if anyone of them is blank
            flag=false;                 
    })
    if (flag)  {
            $('.results').text('all good');       
        } else {  
            $('.results').text('not good');
        } 
});

…它应该可以工作
为什么不使用？为什么在普通对象上使用jQuery.data（）？该方法用于将数据作为
data attr
values附加到DOM元素。jsFiddle非常适合演示您的代码，但也请将您的代码放在帖子中，这样这个问题在链接消失很久之后仍然有用。请不要仅依赖jsFiddle获得完整答案。当链接失效时，您的答案将不完整。谢谢，我对您的答案做了一些调整，但基本上使用了它。很好用。@Sparky672 thx，我已经编辑了我的问题，使它在没有jsFiddle:D的情况下仍然有用