没有不值得去解决的问题,也没有不值得去学习的技术!

基于jQuery Validation Plugin,国家区号与手机的同步验证,在登录处的实现流程

在phone处,如出一辙,只是当手机号码远程验证返回true而国家区号有错误的时候,则清除掉国家区号以前的值,再次执行国家区号的远程验证

1、手机动态码登录,jQuery Validation Plugin验证规则,如图1:

手机动态码登录,jQuery Validation Plugin验证规则
手机动态码登录,jQuery Validation Plugin验证规则

2、先输入一个已经注册的台湾手机号码,由于国家区号为中国大陆,因此提示:海外手机请设置国家区号,如图2:

先输入一个已经注册的台湾手机号码,由于国家区号为中国大陆,因此提示:海外手机请设置国家区号
先输入一个已经注册的台湾手机号码,由于国家区号为中国大陆,因此提示:海外手机请设置国家区号

3、国家区号切换至台湾,国家区号的远程验证返回true,但是手机号码文本框仍然报错,如图3:

国家区号切换至台湾,国家区号的远程验证返回true,但是手机号码文本框仍然报错
国家区号切换至台湾,国家区号的远程验证返回true,但是手机号码文本框仍然报错

4、此时要想手机号码验证通过,则不得不先修改成另外一个值,然后再修改回来,连续两次远程验证,才能够验证通过,如图4、5:

图4
此时要想手机号码验证通过,则不得不先修改成另外一个值,然后再修改回来,连续两次远程验证,才能够验证通过
此时要想手机号码验证通过,则不得不先修改成另外一个值,然后再修改回来,连续两次远程验证,才能够验证通过
图5

5、国家区号切换至中国大陆,此时返回错误,如图6:

国家区号切换至中国大陆,此时返回错误
图6

6、输入一个已经注册的中国大陆手机号码,手机号码的远程验证返回true,但是国家区号仍然报错,如图7:

输入一个已经注册的中国大陆手机号码,手机号码的远程验证返回true,但是国家区号仍然报错
图7

7、现在便是需要解决上述问题,需要做到国家区号与手机的同步验证,先解决如图5之前所遇见的问题,当请求完成之后调用函数,国家区号的远程验证返回true,但是手机号码文本框仍然报错,则再次远程验证一次手机号码,代码如图8:

现在便是需要解决上述问题,需要做到国家区号与手机的同步验证,先解决如图5之前所遇见的问题,当请求完成之后调用函数,国家区号的远程验证返回true,但是手机号码文本框仍然报错,则再次远程验证一次手机号码
图8

8、发现并未执行手机号码的远程验证,如图9:

发现并未执行手机号码的远程验证
图9

9、打开网址:https://github.com/jzaefferer/jquery-validation ,下载jquery-validation的1.11.1版本,因为当前网页所使用的便是此版本,如图10、11:

打开网址:https://github.com/jzaefferer/jquery-validation ,下载jquery-validation的1.11.1版本,因为当前网页所使用的便是此版本
图10
打开网址:https://github.com/jzaefferer/jquery-validation ,下载jquery-validation的1.11.1版本,因为当前网页所使用的便是此版本
图11

10、解压缩之后,复制jquery.validate.js至网站资源对应目录,如图12、13:

解压缩之后,复制jquery.validate.js至网站资源对应目录
图12
解压缩之后,复制jquery.validate.js至网站资源对应目录
图13

11、网页源代码中,将引入jquery.validation.min.js先给注释,引入jquery.validate.js,以方便开发期间调试,如图14:

网页源代码中,将引入jquery.validation.min.js先给注释,引入jquery.validate.js,以方便开发期间调试
图14

12、在element方法中,插入console.log(element);如图15:

在element方法中,插入console.log(element);
图15

13、继续执行第2、3步,查看Console,可以确定已经执行至element(即执行手机号码的再次验证),如图16:

继续执行第2、3步,查看Console,可以确定已经执行至element(即执行手机号码的再次验证)
图16

14、在element方法中,插入console.log(result);如图17:

在element方法中,插入console.log(result);
图17

15、继续执行第2、3步,查看Console,可以确定当result为false的时候,则手机号码的远程验证没有执行,如图18:

继续执行第2、3步,查看Console,可以确定当result为false的时候,则手机号码的远程验证没有执行
图18

16、在check方法中,插入console.log(method);console.log(result);如图19:

在check方法中,插入console.log(method);console.log(result);
图19

17、继续执行第2、3步,查看Console,可以确定当执行手机号码的remote的检测的时候,因为返回false,所以手机号码的远程验证没有执行,如图20:

继续执行第2、3步,查看Console,可以确定当执行手机号码的remote的检测的时候,因为返回false,所以手机号码的远程验证没有执行
图20

18、在内置验证方法methods列表的remote中,插入console.log(value);console.log(previous);如图21:

在内置验证方法methods列表的remote中,插入console.log(value);console.log(previous);
图21

19、继续执行第2、3步,查看Console,可以确定当执行手机号码的远程验证的时候,因为value值与previous.old完全相等,所以返回false,进而导致手机号码的远程验证没有执行,如图22:

继续执行第2、3步,查看Console,可以确定当执行手机号码的远程验证的时候,因为value值与previous.old完全相等,所以返回false,进而导致手机号码的远程验证没有执行
图22

20、在验证器方法previousValue中,如果当前元素的previousValue(即以前的值)存在,则返回以前的值,否则返回空值,如图23:

在验证器方法previousValue中,如果当前元素的previousValue(即以前的值)存在,则返回以前的值,否则返回空值
图23

21、结合在验证器方法resetForm中获取的分析,如果#phone的以前的值与现在即将远程验证的值相等,而又必须要再次执行远程验证的话,只需要将以前的值清除掉即可,如图24、25:

结合在验证器方法resetForm中获取的分析,如果#phone的以前的值与现在即将远程验证的值相等,而又必须要再次执行远程验证的话,只需要将以前的值清除掉即可
图24
结合在验证器方法resetForm中获取的分析,如果#phone的以前的值与现在即将远程验证的值相等,而又必须要再次执行远程验证的话,只需要将以前的值清除掉即可
图25

22、继续执行第2、3步,查看Network,远程验证手机号码成功执行,如图26:

继续执行第2、3步,查看Network,远程验证手机号码成功执行
图26

23、在phone处,如出一辙,只是当手机号码远程验证返回true而国家区号有错误的时候,则清除掉国家区号以前的值,再次执行国家区号的远程验证,如图27:

在phone处,如出一辙,只是当手机号码远程验证返回true而国家区号有错误的时候,则清除掉国家区号以前的值,再次执行国家区号的远程验证
图27

24、继续执行第5、6步,查看Network,远程验证国家区号成功执行,如图28:

继续执行第5、6步,查看Network,远程验证国家区号成功执行
图28

25、网页源代码中,将第11步还原,如图29:

网页源代码中,将第11步还原
图29

总结:如果在js框架的使用手册中无法找到满足相关需求的api,则需要自行去下载相应的未经压缩的源代码,进行阅读分析才行了;

需要长期技术维护或远程问题排查?

我是拥有 15+ 年经验的 PHP / Go 后端工程师,长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。

如果你的项目遇到以下情况,可以先从一次小问题排查开始合作:

  • ✅ PHP / Laravel / Yii2 老项目无人维护
  • ✅ Go / Gin 后端接口需要排查或优化
  • ✅ WordPress 网站访问慢、报错或插件冲突
  • ✅ Nginx / MySQL / Redis / Linux 服务器异常
  • ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
  • ✅ 需要长期远程技术支持或兼职维护

更多介绍请查看:关于我 & 合作

微信:13980074657
邮箱:shuijingwanwq@gmail.com
Telegram:@shuijingwan
GitHub:https://github.com/shuijingwan

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理