Based on jQuery validation plugin, the synchronization verification of the national area code and the mobile phone, the implementation process at the login location

1. Mobile phone dynamic code login, jQuery Validation plugin verification rules, as shown in Figure 1:

Mobile phone dynamic code login, jQuery validation plugin verification rules

2. Enter a registered Taiwan mobile phone number first. Since the national area code is mainland China, so remind: Please set the national area code for overseas mobile phones, as shown in Figure 2:

First enter a registered Taiwan mobile phone number. Since the national area code is mainland China, so remind: Please set the national area code for overseas mobile phones

3. Switch the national area code to Taiwan, and the remote verification of the national area code will return true, but the mobile phone number text box still reports an error, as shown in Figure 3:

The national area code is switched to Taiwan, and the remote verification of the national area code returns true, but the mobile phone number text box still reports an error

4. If you want to pass the mobile phone number verification at this time, you have to modify it to another value first, and then modify it back. Only after two consecutive verifications can the verification pass, as shown in Figure 4 and 5:

At this time, if you want the mobile phone number to be verified, you have to modify it to another value first, and then modify it back. Only after two consecutive verifications can the verification pass.

Figure 5

5. Switch the national area code to mainland China, and return an error at this time, as shown in Figure 6:

Figure 6

6. Enter a registered mobile phone number in mainland China, and the remote verification of the mobile phone number will return true, but the national area code will still report an error, as shown in Figure 7:

Figure 7

7. Now it is necessary to solve the above problems. It is necessary to achieve the synchronous verification of the national area code and the mobile phone. First, solve the problems encountered before in Figure 5. After the request is completed Call the function, the remote authentication of the national area code returns true, but the text box of the mobile phone number still reports an error, and the mobile phone number is re-authenticated once again. The code is shown in Figure 8:

8

8. It is found that the remote verification of the mobile phone number has not been executed, as shown in Figure 9:

Figure 9

9. Open the URL:https://github.com/jzaefferer/jquery-validation, download the 1.11.1 version of jQuery-validation, because the current web page is using this version, as shown in Figure 10 and 11:

Figure 10

Figure 11

10. After decompressing, copy jquery.validate.js to the corresponding directory of website resources, as shown in Figure 12 and 13:

Figure 12

Figure 13

11. In the source code of the web page, jquery.validation.min.js will be introduced first, and jquery.validate.js will be introduced to facilitate debugging during development, as shown in Figure 14:

Figure 14

12. In the Element method, insert console.log(element); as shown in Figure 15:

Figure 15

13. Continue to execute steps 2 and 3, check the console, you can confirm that it has been executed to Element (that is, to execute the re-validation of the mobile phone number), as shown in Figure 16:

Figure 16

14. In the Element method, insert console.log(result); as shown in Figure 17:

Figure 17

15. Continue to execute steps 2 and 3, check the console, you can determine that when the result is false, the remote verification of the mobile phone number is not executed, as shown in Figure 18:

18

16. In the check method, insert console.log(method); console.log(result); as shown in Figure 19:

Figure 19

17. Continue to execute steps 2 and 3, check the console, you can determine that when the remote detection of the mobile phone number is executed, the remote verification of the mobile phone number is not executed because the remote verification of the mobile phone number is executed, as shown in Figure 20:

Figure 20

18. In the Remote of the built-in validation method Methods list, insert console.log(value); console.log(previous); as shown in Figure 21:

Figure 21

19. Continue to execute steps 2 and 3, check the console, you can determine when the remote authentication of the mobile phone number is executed, because the value value It is exactly the same as previous.old, so return FALSE, which causes the remote verification of the mobile phone number to not be executed, as shown in Figure 22:

Figure 22

20. In the validator method PreviousValue, if the previous value of the current element exists (that is, the previous value), it will return the previous value, otherwise it will return a null value, as shown in Figure 23:

Figure 23

21. Combined with the analysis obtained in the validator method ResetForm, if the previous value of #Phone is equal to the value of the remote verification, and you have to perform remote authentication again, you only need to clear the previous value, as shown in Figure 24 and 25:

Figure 24

Figure 25

22. Continue to execute steps 2 and 3, check the network, and the remote verification mobile phone number is successfully executed, as shown in Figure 26:

Figure 26

23. In the phone, it is the same, but when the mobile phone number is remotely verified and returned to true and the national area code is wrong, the previous value of the national area code is cleared, and the remote verification of the national area code is executed again, as shown in Figure 27:

Figure 27

24. Continue to execute steps 5 and 6, check network, and remotely verify the national area code successfully, as shown in Figure 28:

Figure 28

25. In the source code of the web page, restore step 11, as shown in Figure 29:

Figure 29

Summary: If you cannot find an API to meet the relevant needs in the user manual of the JS framework, you need to download the corresponding uncompressed source code and read and analyze it.