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

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

我喜欢输入值

xyz@gmail.com

或

1234567890

任何其他警报

“无效电子邮件或电话号码”

比如Facebook的注册表格

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

注册

我可能会用两个正则表达式来测试它。首先检查其中一个（例如，它是有效的电子邮件），然后如果失败，请检查另一个（例如，它是有效的电话号码）。如果两者都不存在，则显示一条验证消息，说明该值无效。我不会在这里提供正则表达式示例，因为互联网上有几十个正则表达式，每个正则表达式都有其优点和缺点——没有必要为电子邮件或电话的最佳正则表达式展开激烈的战争，但代码如下所示：

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');
    }
}

谢谢

我使用了两个正则表达式，比如

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 ");
        }
}

试试这个，它正在工作：

      <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>

$（文档）.ready（函数（）{
$（“#cuntryCode”）.hide（）；
$（“#useridInput”）.on（'input'，function（）{
var len=$（“#useridInput”）.val（）.length；
如果（len>=2）{
var VAL=该值；
var intRegex=/^[1-9][0-9]*（[.][0-9]{2}|）$/；
如果（！intRegex.test（VAL））{
$（“#错误标题”）.html（'无效电子邮件。请检查拼写'）；
$（'#错误标题'）.css（'color'，'red'）；
$（“#cuntryCode”）.hide（）；
}否则{
if（len<10）{
$（“#错误标题”）.html（'无效的手机号码。请重试'）；
$（'#错误标题'）.css（'color'，'red'）；
$（“#cuntryCode”）.show（）；
}否则{
$（“#错误标题”）.html（'无效的手机号码。长度必须为10位'）；
$（'#错误标题'）.css（'color'，'red'）；
}
}
}否则{
$（“#cuntryCode”）.hide（）；
$（'#错误标题'）.html（''）；
}
});             
});
欢迎回来
使用您的电子邮件地址或手机号码登录。
+241
下一个

我投票结束这个问题，因为它只是一个代码请求。不过，这个特定问题的正确答案可以用来解决类似的问题。因此，我认为最好是重新措辞，而不是关闭。完成验证：亚马逊、Facebook、优步等电子邮件或电话号码，只需一次输入。你能提供一些关于你答案的文本信息吗？

      <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>

$("#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();

});