我想用jQuery表单验证程序用电子邮件或手机号码验证登录表单的登录凭据

我想用手机号码或电子邮件地址登录。我的php代码工作正常。现在我想用jqueryforvalidateplugin验证登录表单。我已经试了很久，但找不到解决办法。如何仅验证电子邮件或手机号码验证的输入文本框

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

});

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

HTML代码：

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

});

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

电子邮件或手机
密码

---

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

该插件允许您使用

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

---

对于电子邮件，我复制了插件在其

电子邮件

规则中使用的相同验证（如果愿意，请使用另一个）。对于手机，我只是检查它是否有10个没有空格的号码，但是你可以根据你想要的手机格式调整它。

这是自定义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";
    }
  }
);

---

将电子邮件文本框类型email更改为text它已经是text@pankajmakwana类型您收到了什么错误消息？