jquery - 我想使用电子邮件或手机号码验证登录表单，以使用 jQuery 表单验证器获取登录凭据

Question

我想使用手机号码或电子邮件地址登录。我的 php 代码工作正常。现在我想使用 jQuery 验证登录表单以进行验证插件。我已经尝试了很长时间，但无法解决这个问题。如何验证输入文本框仅用于电子邮件或手机号码验证？

我的 jQuery 脚本：

$(document).ready(function(){

    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            email: {
                required: "Email or Mobile number is required"
            },
            password: {
                required: "specify password"
            }
        }
    });

});

HTML 代码：

<div id="bar">
<div id="container">
    <!-- Login Starts Here -->
    <div id="loginContainer">
        <a href="#" id="loginButton"><span>Login</span><em></em></a>
        <div style="clear:both"></div>
        <div id="loginBox">                
            <form id="loginForm">
                <fieldset id="body">
                    <fieldset>
                        <label>Email or Mobile</label>
                        <input type="text" name="email" id="email" class="required"/>
                    </fieldset>
                    <fieldset>
                        <label for="password">Password</label>
                        <input type="password" name="password" id="password" />
                    </fieldset>
                    <input type="submit" id="login" value="Sign in" />

                </fieldset>
                <span><a href="#">Forgot your password?</a></span>
            </form>
        </div>
    </div>
    <!-- Login Ends Here -->
</div>

如果在文本框中我写电子邮件，我会正确验证，但是当我输入手机号码时，会显示错误消息。

Answer 1

这是验证电子邮件和电话号码的自定义 Jquery 附加方法.addMethod()，请尝试以下给出的代码：

$.validator.addMethod(
  "email_or_mobile",
  function (value, element, param) {
    if (/^[0-9]+$/.test(value) && !/^\d{10}$/.test(value)) {
      return this.optional(element) || false;
    } else if (
      /^[a-zA-Z.@]+$/.test(value) &&
      !/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(value)
    ) {
      return this.optional(element) || false;
    } else {
      return this.optional(element) || true;
    }
  },
  function (error, element) {
    var value = $(element).val();
    if (/^[0-9]+$/.test(value) && !/^\d{10}$/.test(value)) {
      return "Your Mobile number must be 10 numbers";
    }
    if (
      /^[a-zA-Z.@]+$/.test(value) &&
      !/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(value)
    ) {
      return "Please enter valid email";
    }
  }
);

Answer 2

该插件允许您使用该函数创建自己的验证规则.addMethod()，因此您可以使用正则表达式来测试输入的值...

$.validator.addMethod("myusername", function(value,element) {
    return this.optional(element) ||
           /^[0-9]{10}$/.test(value) ||  
           /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
}, "Username format incorrect.");

然后，应用它...

$("#loginForm").validate({
    rules: {
        email: {
            required: true,
            myusername: true
        },
        password: {
            required: true
        }
    },
    messages: {
        email: {
            required: "Username is required"
        },
        password: {
            required: "specify password"
        }
    }
});

对于电子邮件，我复制了插件在其email规则中使用的相同验证（如果您愿意，请使用另一个验证）。对于手机，我只是检查它是否有十个没有空格的数字，但您可以将其调整为您想要允许的手机格式。