如何：动态 jQuery，至少选择一个，使用掩码验证
Posted
技术标签:
【中文标题】如何：动态 jQuery，至少选择一个，使用掩码验证【英文标题】：How to: dynamic jQuery, pick at least one, validation with mask 【发布时间】：2012-09-30 00:49:30 【问题描述】：我有一个动态的文本框列表来获取一种或多种货币金额。 我希望至少有一个文本框具有有效的货币金额。
我无法让它完全正常工作。如果有任何想法或建议，我将不胜感激。
这是我目前所拥有的......
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/ecmascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/ecmascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.3.min.js"></script>
<div id="page_wrap"><form action="http://local.host.com/myform/net/send" method="post" accept-charset="utf-8" id="myform">
<h2>Test</h2>
<h3>Enter an amount and click send</h3>
<?php //foreach ($recs as $rec): ?>
<Fieldset>
<label for="Amount_1">Amount</label>
<input name="Amount_1" type="text" id="Amount_1" />
</Fieldset>
<Fieldset>
<label for="Amount_2">Amount</label>
<input name="Amount_2" type="text" id="Amount_2" />
</Fieldset>
<Fieldset>
<label for="Amount_3">Amount</label>
<input name="Amount_3" type="text" id="Amount_3" />
</Fieldset>
<?php // endforeach; ?>
<span class="button right"><input type="submit" value="Send" /></span>
<br class="flt_clear" />
</form>
<script>
$(document).ready(function()
$('input[name^="Amount_"]').mask("$?999");
$.validator.addMethod("pickAtLeastOne", function(value, element, param)
return $('input[name^="Amount_"]').val() == "$";
);
$('#myform').validate();
$('input[name^="Amount_"]').each(function()
$(this).rules("add",
pickAtLeastOne: true,
messages:
pickAtLeastOne: "Please enter at least one amount"
);
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您应该检查当前正在测试的元素，而不是整个组选择器，因此请尝试替换以下代码：
return $('input[name^="Amount_"]').val() == "$";
对于这个：
return value == "$";
因为在
【讨论】：
您好尼尔森，感谢您的编辑。当我尝试这样做时，javascript 可以工作，但没有条目、一个条目、2 个条目或所有条目都会出错。我希望它仅在没有条目时显示错误。 我现在看到有 2 个问题。 1 是最初，文本框是空的。仅当单击文本框时才会出现掩码。只有这样 $ 才会出现在文本框中。第二个问题是，如果用户单击文本框然后离开该字段，则其他文本框可能包含美元符号。在这种情况下，您的解决方案不起作用，因为包含 $ 符号的字段超过 1 个。【参考方案2】：试试这个，我在 txtBox 上使用类数量，你可以修改你想要的和工作代码FIDDLE
$.validator.addMethod("pickAtLeastOne", function(value, element, param)
var retCode = false;
var txtBoxLength = $('.amount').length;
var ctr = 0;
$('.amount').each(function(value, element)
if ($(this).val() == '')
ctr++;
);
return ctr == txtBoxLength;
);
【讨论】：
感谢这个拉杰什！这没有考虑到掩码函数可能会向任何文本框添加“$”。但是，我看到您只是提供了另一种方法来通过使用类来识别元素来满足我的要求。很强大。谢谢！【参考方案3】：这是我如何让它工作的。除了我的 pickAtLeastOne 方法外，一切都是正确的。这是工作的：
$.validator.addMethod("pickAtLeastOne", function(value, element, param)
var retCode = false;
$('input[name^="Amount_"]').each(function(value, element)
if ($(this).val() != '$' && $(this).val() != '')
retCode = true;
return;
);
return retCode;
);
【讨论】：
以上是关于如何：动态 jQuery，至少选择一个，使用掩码验证的主要内容，如果未能解决你的问题，请参考以下文章
如何通过jQuery选择使用javascript动态生成的innerHTML元素[重复]