jQuery validtor内置验证规则手动调用

朴老师

于 2022-12-17 13:37:08 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/MiZhiBug/article/details/128352769

这篇博客介绍了如何在jQuery.validator中结合自定义方法和内置的email验证方法，实现一个输入框既能验证手机号码也能验证邮箱的功能。通过新增一个名为'loginName'的自定义验证方法，该方法首先检查输入长度是否为11位，然后使用手机号码正则进行匹配，如果都不符合，则调用内置的email验证方法。这样，用户可以输入有效的手机号码或邮箱地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：

有个需求，一个输入框既可以输入手机又可以输入邮箱。手机号码验证规则自己写，邮箱想用validator内置的。

症结：

如何调用jQuery validator的内置方法？

百度不得其姐，摸到官方文档才得（以email为例）：jQuery.validator.methods.email.call(this, value, element)
jQuery validator官方文档

主菜（以内置email为例）：

新增一个自定义方法，在其中手写手机号码正则，并调用内置email验证方法：jQuery.validator.methods.email.call(this, value, element);
如下：

jQuery.validator.addMethod("loginName",function(value,element){
    var length = value.length;
    var phone=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
    return this.optional(element)||(length == 11 && phone.test(value) || jQuery.validator.methods.email.call(this, value, element));
},"请填写正确的手机号码或邮箱");