标题这个问题是一个杀手。欢迎改进。
对于字段验证,每个字段需要三个数据元素:varname,element ID和required(t / f)。
但是,我无法弄清楚逻辑。我对一个关联型对象很好,但是添加所需的是/否位比我能算出的要多。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数组中添加第三个数据(这意味着它将不再是一个关联数组)来指示哪些字段是 required 。例如,假设第二个字段是唯一需要完成的字段。如何将第三个参数添加到对象中,然后在验证循环中使用它?
答案 0 :(得分:2)
<强> jsFiddle Demo
强>
由于您已经完成了使用标识符组合对象的工作,您可以使用.each
迭代它,然后获取key的字符串值并在jQuery选择器中使用它们。它比使用eval更安全。然后你需要做的就是修剪这些元素的值,并确保它们不是空的。
编辑“向对象添加属性以过滤所需元素”
在这种情况下,我相信你会把'fld_'部分变成一个对象本身,并且它可能是一个id和一个需求boolean。然后在迭代中检查布尔值,并在需求为false时跳过。
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" />