javascript - js 字段验证 - 遍历对象，每个字段考虑三个数据

Question

给这个问题起标题是一个 killer 。欢迎改进。

对于字段验证，每个字段需要三个数据元素:varname、元素 ID 和 required(t/f)。

虽然我无法弄清楚其中的逻辑。我擅长关联类型对象，但添加所需的是/否位超出了我的理解。

jsFiddle

HTML:

<input id="fld_1" class="input" type="text" value="bob" /><br>
<input id="fld_2" class="input" type="text" value="" /><br>
<input id="fld_3" class="input" type="text" value="pat" /><br>
<input id="mybutt" class="btn" type="button" value="Test" />

js/jQ:

objFields = {'f1':'fld_1', 'f2':'fld_2', 'f3':'fld_3'};
arrErrors = [];

$('#mybutt').click(function(){
    for (var key in objFields){
        var tmp = objFields[key];
        eval('var ' + key+ ' = $("#' +tmp+ '").val()');
        alert( key +' => '+ eval(key) );
        //IF contents required and field is empty, error and return false
    }
});

不过，这是关键部分:我需要向 assoc 数组添加第三个数据(这意味着它将不再是 assoc 数组)以指示哪些字段是必需的。例如，假设第二个字段是唯一需要填写的字段。如何将第三个参数添加到对象，然后在验证循环中使用它？

Answer 1

jsFiddle Demo

由于您完成了使用标识符组合对象的工作，因此您只需使用 .each 对其进行迭代，然后获取 key 的字符串值并在 jQuery 选择器中使用它们。它会比使用 eval 安全得多。然后，您需要做的就是 trim 这些元素的值并确保它们不为空。

编辑“向对象添加属性以过滤所需元素”

在这种情况下，我相信您会将“fld_”部分变成一个对象本身，并且它可能是一个 id 和一个要求 bool 值。然后检查 bool 值的迭代并在要求为假时跳过。

var boolish = {
 'True' : true, 'False' : false,
 'true' : true, 'false' : false,
};
var objFields = {
 'f1': { 'id' : 'fld_1', 'required' : 'True' } ,
 'f2': { 'id' : 'fld_2', 'required' : 'False' } ,
 'f3': { 'id' : 'fld_3', 'required' : 'true' }
};//often booleans from server side come back in strings
var arrErrors = [];

$('#mybutt').click(function(){
  arrErrors = [];
 //IF contents required and field is empty, error and return false
 $.each(objFields,function(_,val){
  if(!boolish[val.required])return true;//skip required = false (return true is jQuery for continue)
  if($("#"+val.id).val().trim() == "")arrErrors.push(_);
 });
 console.log(arrErrors);
});

.input{width:150px;margin:10px;background:aliceblue;}
.btn{margin:30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fld_1" class="input" type="text" value="bob" /><br>
<input id="fld_2" class="input" type="text" value="" /><br>
<input id="fld_3" class="input" type="text" value="pat" /><br>
<input id="mybutt" class="btn" type="button" value="Test" />