基于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，则需要自行去下载相应的未经压缩的源代码，进行阅读分析才行了；