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

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

我想使用jQuery表单验证器

2 个答案: