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

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

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

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

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

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

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

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

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

图5

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

图6

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

图7

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

图8

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

图9

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

图10

图11

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

图12

图13

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

图14

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

图15

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

图16

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

图17

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

图18

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

图19

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

图20

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

图21

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

图22

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

图23

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

图24

图25

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

图26

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

图27

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

图28

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

图29

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

永夜