如何使用 Facebook 等单一输入验证电子邮件或电话号码

Question

How to validate Email or Phone Number Using Single Input?

I like to have input value xyz@gmail.com OR 1234567890 anything else alert "Invalid Email or phone number"

Like Facebook Sign Up form

<form>
<input type="text" placeholder="Email or mobile number"  />
<button type="submit" >Sign Up</button>
</form>

Answer 1

Thanks!!

I Did using two regular expressions like

function validateEmail() {
        var email = document.getElementById('txtEmail');
        var mailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/;
        if (email.value == "") {
            alert( "  Please enter your Email or Phone Number  ");
        }
        else if (!mailFormat.test(email.value)) {
            alert( "  Email Address / Phone number is not valid, Please provide a valid Email or phone number ");
            return false;
        }
        else {
            alert(" Success ");
        }
}

Answer 2

I'd probably test it with two regexes. First check for one (eg is it a valid email), then if that fails, check it with the other (eg is it a valid phone number). If neither, show a validation message saying that the value is invalid. I won't supply regex examples here as there are dozens of those around the internet and each has pros and cons - no sense starting a flame war over the best regex for email or phone, but the code would look like the following:

function validateEmailPhoneInput(field)
{
    if (emailRegex.test(field.value))
    {
        //it's an email address
    }
    else if (phoneRegex.test(field.value))
    {
        //it's a phone number
    }
    else
    {
        //display your message or highlight your field or whatever.
        field.classList.add('invalid');
    }
}

Answer 3

Try this it's working:

      <script>
        $(document).ready(function () {
           $("#cuntryCode").hide();
            $("#useridInput").on('input', function () {
                var len = $("#useridInput").val().length;
                if (len >= 2) {
                    var VAL = this.value;
                    var intRegex = /^[1-9][0-9]*([.][0-9]{2}|)$/;
                    if (!intRegex.test(VAL)) {
                        $('#error-caption').html('Invalid email. Please check spelling.');
                        $('#error-caption').css('color', 'red');
                        $("#cuntryCode").hide();
                    } else {                    
                     if(len < 10){
                        $('#error-caption').html('Invalid mobile number. Please try again.');
                        $('#error-caption').css('color', 'red');
                        $("#cuntryCode").show();
                      }else{
                        $('#error-caption').html('Invalid mobile number. length must be 10 digit.');
                        $('#error-caption').css('color', 'red');
                    }
                  }
                }else{
                   $("#cuntryCode").hide();
                   $('#error-caption').html('');
                }

            });             
        });

    </script>



<form class="push--top-small forward" method="POST" data-reactid="15">
            <h4 id="input-title" data-reactid="16">Welcome back
            </h4>
            <label class="label" id="input-label" for="useridInput" data-reactid="17">Sign in with your email address or mobile number.
            </label>
            <div style="margin-bottom:24px;" data-reactid="18">
              <div >
                <div id="cuntryCode" class="_style_4kEO6r" style="float: left; height: 44px; line-height: 44px;">
                  <div tabindex="0" > +241
                  </div>                      
                </div>
                <div style="display:flex;">
                  <input id="useridInput" autocorrect="off" autocapitalize="off" name="textInputValue" class="text-input" placeholder="Email or mobile number" aria-required="true" aria-invalid="false" aria-describedby="error-caption input-title">
                </div>
              </div>
              <div id="error-caption">
              </div>
            </div>
            <button class="btn btn--arrow btn--full" data-reactid="24">
              <span class="push-small--right" data-reactid="25">Next
              </span>
            </button>
          </form>

Answer 4

This code is worked for me.
var a=document.getElementById('txtEmail').value;
                var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
                if(a=="")
                {
                    alert('Please enter value');
                    return false;
                }
                else if(isNaN(a))
                {
                    if(!(a.match(mailformat)))
                {
                    alert('Please enter email address/phno valid');
                    return false;
                }
                }
                else
                {
                    if(a.length()!=10)
                    {
                        alert('Please enter valid phno');
                        return false;
                    }
                }

Answer 5

$("#volunteer_submit").click(function myfunction() {

    function email_number_check() {
        var email_number = $("input[name=email_mobile]").val();

        if (email_number == "") {
            alert("Fill in the Required Fields field cannot be empty");
        }
        else if (isNaN(email_number) == true) {

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (reg.test(email_number) == false) {
                alert('Invalid Email Address');
            }
            else {
            $("#contact-form").submit();
        }

        }
        else if (isNaN(email_number) == false) {

            var reg_mobile = /^(\+\d{1,3}[- ]?)?\d{10}$/;

            if (reg_mobile.test(email_number) == false) {

                alert('Invalid mobile');
            }
            else {
            $("#contact-form").submit();
        }
        }
    }
    email_number_check();

});