如何使用 jQuery 为字段设置最小长度？答案

【问题标题】：How can I set a minimum length for a field with jQuery?如何使用 jQuery 为字段设置最小长度？
【发布时间】：2012-03-05 17:55:57
【问题描述】：

我在一个表单中有四个电子邮件字段，我希望用户在使用提交按钮时，至少需要填写一个字段。

这是 HTML：

<form id="new_invitation" class="new_invitation" method="post" data-remote="true" action="/invitations" accept-charset="UTF-8">
    <div id="invitation_form_recipients">
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_0"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_1"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_2"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_3"><br>
    </div>
    <input type="submit" value="Send invitation" name="commit">
</form>

我该怎么做？

【问题讨论】：

标签： jquery

【解决方案1】：

$('#new_invitation').submit(function(event) {
    if ($('#invitation_form_recipients input').filter(function() {
        return $(this).val();
    }).length == 0) {
        // all the fields are empty
        // show error message here

        // this blocks the form from submitting
        event.preventDefault();
    }


});

【讨论】：

我认为这会将字符串“0”视为空输入，您可能希望更明确地使用过滤条件。
string '0' 可以（因为!!0 == false 但!!'0' == true），但可以肯定的是，我会在过滤器的返回值之前添加!!。
谢谢，我需要知道输入的电子邮件是否是正则表达式电子邮件。这对我不起作用:(

【解决方案2】：

一种方法：连接四个值，如果它不为空，那么您确定其中一个已被填写。

【讨论】：

【解决方案3】：

这应该可行：

<script type="text/javascript">
    function check_recipients(form){
        var empty = true;
        $('#invitation_form_recipients input').each(function(){
            if($(this).val() != ''){
                empty = false;
            }
        });
        if(empty){
            alert('You have to fill in at least one recipient!');
            return false;
        }
        else{
            form.submit();
        }
    }
</script>

<form id="new_invitation" class="new_invitation" onsubmit="check_recipients(this); return false;" method="post" data-remote="true" action="/invitations" accept-charset="UTF-8">
    <div id="invitation_form_recipients">
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_0"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_1"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_2"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_3"><br>
    </div>
    <input type="submit" value="Send invitation" name="commit">
</form>

【讨论】：