我想使用 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

该插件允许您使用 .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 规则中使用的相同验证（如果您愿意，可以使用另一个）。对于手机，我只是检查它有没有空格的十个数字，但你可以将它调整为你想要允许的手机格式。

Answer 2

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

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

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

I want to validate login form with email or mobile number for login credentials with jQuery form validator

jquery

jquery-ui

jquery-plugins

jquery-forms-plugin

jquery-form-validator