javascript - 电子邮件地址和电话验证 | jQuery

Question

在输入字段上验证电子邮件和电话时遇到一些问题。

基本上，当选择电子邮件输入时，我会对其进行验证。电话验证 - 主要检查所使用的号码。

我找到了jQuery Validate并在我的演示中引用了这一点。

这是我第一次进行 Reg Ex 验证，有点困惑，所以希望有人可以在这方面帮助我。

电话验证正在工作，但是，我似乎无法弄清楚在测试时如何满足现场要求。它还要求电子邮件作为必填字段。

最终，用户必须输入有效的电子邮件或电话号码，因此也需要进行验证或错误处理，这是我可以做的。

DEMO HERE

这是我的 jQuery:

var ebuForm = {

        init : function() {
            ebuForm.showInput();
            ebuForm.validatePhone();
        },

        showInput : function(e) {

            var radioInput = $("input[type='radio']"),
                emailRadio = $("input[value='email']");

            radioInput.change(function(){

                var emailInput = $('.email-input'),
                    phoneInput = $('.phone-input');

                if($(this).val() =="email") {
                    emailInput.show();
                    phoneInput.hide();
                    console.log('Email Enabled');
                } else {
                    emailInput.hide();
                    phoneInput.show();
                    console.log('Phone Enabled');
                }

            });
            emailRadio.prop('checked', true).trigger("change");
        },

        validatePhone : function() {
            $('#myform').validate({
                rules: {
                    phone: {
                        phoneUS: true,
                        required: true
                    }
                },
                submitHandler: function(form) { // for demo
                    alert('valid form');
                    return false;
                }
            });

        }

};
$(function() {
    ebuForm.init();
});

Answer 1

工作 fiddle 示例:http://jsfiddle.net/775X2/56/

您的 HTML:

<form id="myform">
    <div class="grid4">
        <input type="radio" checked="checked" tabindex="50" class="left" name="x" id="email" value="email" />
        <label for="email" class="left marginRight20">Email</label>
        <input type="radio" tabindex="60" class="left" name="x" id="phone" />
        <label for="phone" class="left">Phone</label>
        <br />
        <input type="text" class="email-input" name="emailer" placeholder="Email Address" />
        <input type="text" class="phone-input" name="phone" placeholder="Phone Number" />
    </div>
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

一些 jQuery:

var ebuForm = {

    init: function () {
        ebuForm.showInput();
        ebuForm.validatePhone();
    },

    showInput: function (e) {

        var radioInput = $("input[type='radio']"),
            emailRadio = $("input[value='email']");

        radioInput.change(function () {

            var emailInput = $('.email-input'),
                phoneInput = $('.phone-input');

            if ($(this).val() == "email") {
                emailInput.show();
                phoneInput.hide();
                console.log('Email Enabled');
            } else {
                emailInput.hide();
                phoneInput.show();
                console.log('Phone Enabled');
            }

        });
        emailRadio.prop('checked', true).trigger("change");
    },

    validatePhone: function () {
        $('#myform').validate({
            rules: {
                phone: {
                    phoneUS: true,
                    required: true
                },
                emailer: {
                    required: true,
                    email: true
                },
            },
            submitHandler: function (form) { // for demo
                alert('valid form');
                return false;
            }
        });

    }

};
$(function () {
    ebuForm.init();
});