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

基于 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 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系