JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
js field validation - loop through object with three data considerations per field
标题这个问题是一个杀手锏。欢迎改进。
对于字段验证,每个字段需要三个数据元素:varname、元素 ID 和必需 (t/f)。
不过,我无法弄清楚其中的逻辑。我擅长关联类型的对象,但添加所需的是/否位超出了我所能弄清楚的。
js小提琴
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 数组)以指示哪些字段是必需的。 例如,假设第二个字段是唯一需要填写的字段。 如何将第三个参数添加到对象,然后在验证循环中使用它?
jsFiddle Demo
由于您已经完成了使用标识符组合对象的努力,因此您可以使用.each
对其进行迭代,然后获取 key 的字符串值并在 jQuery 选择器中使用它们。这将比使用eval安全得多。然后,您需要做的就是修剪这些元素的值,并确保它们不为空。
编辑"向对象添加属性以过滤所需元素"
在这种情况下,我相信你会把"fld_"部分变成一个对象本身,随之而来的可能是 id 和需求布尔值。然后签入布尔值的迭代,并在要求为 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" />
相关文章:
- 如何通过三个不同的字段对javascript数组进行排序
- JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
- Javascript UK 使用三个输入字段进行排序代码验证
- 如何组合来自三个不同字段的值,并仅在所有三个字段都填充值时才将其设置为隐藏字段
- 如果三个特定下拉字段中的三个全部为空,则禁用提交按钮
- Jquery - 键入事件检查三个字段中的输入值
- 如何遍历表并在三个不同的数组中收集这些字段的值
- AngularJS,如何使两个输入字段'每当它们动态变化时,s的和总是等于第三个输入
- 如何将三个单独的字段验证为一个日期
- 如何创建一个只有一个提交按钮的具有三个文本输入字段的表单
- 剑道UI:如何求和两个字段并在第三个字段中显示
- 设置分类法字段多个值
- 相同表单中的三个或更多字段-如何动态添加/删除空白字段
- 并排运行三个字段集
- 需要计算2个输入字段,并显示在第三
- 如果第三个字段不为空,则需要另外两个字段
- 如何接收“隐藏字段”第二个jsp中的值
- 在Mongoose / MongoDB中创建多字段(2个以上)索引
- Javascript的两个字段的乘法与答案在PHP while循环中的第三
- 必填字段两个字段之一