Javascript 为什么我的jQuery验证规则被随机应用到另一个字段？

我对jQuery验证插件有一个奇怪的问题

我有一个字段TwitterUsername，它不是必需的，也没有验证。如果我不在这个领域输入任何内容，它就可以正常工作。但，若我在该字段中输入任何值，我将收到一个有效的电子邮件地址。绑定到其上方EmailAddress字段的邮件

您可以在以下位置看到此行为：

以下是本网页的主要代码：

<form role="form" id="ContactMessageForm">
    <div class="form-group">
        <label for="FirstName" class="sr-only">First Name</label>
        <input type="text" id="FirstName" name="FirstName" maxlength="255" class="form-control" placeholder="First Name" />
    </div>
    <div class="form-group">    
        <label for="LastName" class="sr-only">Last Name</label>
        <input type="text" id="LastName" name="LastName" maxlength="255" class="form-control" placeholder="Last Name" />
    </div>
    <div class="form-group">
        <label for="EmailAddress" class="sr-only">Email Address</label>
        <input type="email" id="EmailAddress" name="EmailAddress" maxlength="255" class="form-control" placeholder="Email Address" />
    </div>
    <div class="form-group">    
        <label for="TwitterUsername" class="sr-only">Twitter Username</label>
        <input type="text" id="TwitterUsername" name="TwitterUsername" maxlength="255" class="form-control" placeholder="Twitter Username" />
    </div>
    <div class="form-group">
        <label for="Subject" class="sr-only">Subject</label>
        <input type="text" id="Subject" name="Subject" maxlength="255" class="form-control" placeholder="Subject" />
    </div>
    <div class="form-group">
        <label for="Message" class="sr-only">Message</label>
        <textarea id="Message" name="Message" rows="5" class="form-control" placeholder="Message"></textarea>
    </div>
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>

<script type="text/javascript">
        $(document).ready(function () { 
    $('#ContactMessageSentAlert').hide();
    $('#ContactMessageForm').show();

    $.validator.addMethod('twitterUsername', function(value, element) {
        return this.optional(element) || /^(@?[a-zA-Z0-9]{1,15})$/.test(value);
    }, '');

    var validator = $('#ContactMessageForm').validate({
        errorClass: 'has-error',
        errorElement: 'div',
        rules: {
            FirstName: {required: true},
            LastName: {required: true},
            EmailAddress: {required: true, email: true},
            TwitterUsername: {twitterUsername: true},
            Subject: {required: true},
            Message: {required: true}
        },
        messages: {
            FirstName: {required: 'Please enter your first name.'},
            LastName: {required: 'Please enter your last name.'},
            EmailAddress: {required: 'Please enter your email address.', email: 'Please enter a valid email address.'},
            TwitterUsername: {twitterUsername: 'Please enter a valid Twitter username.'},
            Subject: {required: 'Please enter a subject.'},
            Message: {required: 'Please enter a message.'}
        },
        errorPlacement: function (error, element) {
            $(error).insertBefore($(element));
        },
        highlight: function(element, errorClass) {
            $(element).parent('div').addClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parent('div').removeClass(errorClass);
        },
        onfocusout: false
    });     
});
</script>
<script type="text/javascript">
/* Assign an OnClick function to items in the "Send" button */
$('#ContactMessageSendButton').click(function(e) {
    $(document).ready(function () {
        var form = $('#ContactMessageForm');
        form.validate();
        if (form.valid() === true) {
            var sender = $.trim($('#EmailAddress').val());
            var senderName = $.trim($('#FirstName').val()) + ' ' + $.trim($('#LastName').val());
            var recipient = 'info@eat-sleep-code.com';
            var subject = $.trim($('#Subject').val());
            var message = $.trim($('#Message').val()) + '<br />' + $.trim($('#TwitterUsername').val());
            sendMail(sender, senderName, recipient, subject, message);
        }
    });
}); 
</script>

---

您已将其定义为电子邮件输入类型。听起来文本更合适。你是对的！谢谢你接电话。jQuery验证应用这样的验证仍然很奇怪。但它现在似乎正在发挥作用。