Mobile phone number verified by Jquery Validation plug-in, jqueryvalidation

Mobile phone number verified by Jquery Validation plug-in, jqueryvalidation
JQuery Validate plug-in Introduction

The jQuery Validate plug-in provides powerful form verification functions to simplify form verification on the client side. It also provides a large number of custom options to meet various application needs. This plug-in is bundled with a set of useful verification methods, including URL and email verification, and provides an API for Writing user-defined methods. All bundling methods use English as the error message by default and have been translated into 37 other languages.
This plug-in was compiled and maintained by J örn Zaefferer. He is a member of the jQuery team, the main developer of the jQuery UI team, and the maintenance personnel of QUnit. This plug-in started to appear in early jQuery in 2006 and has been updated to date. The current version is 1.13.1 (as of: 2015.05.26 ).

Custom mobile phone number verification code

// Verify the jQuery mobile phone number. validator. addMethod ("isMobile", function (value, element) {var length = value. length; var mobile =/^ (13 [0-9] {9}) | (18 [0-9] {9 }) | (14 [0-9] {9}) | (17 [0-9] {9}) | (15 [0-9] {9}) $ /; return this. optional (element) | (length = 11 & mobile. test (value) ;}, "Please enter your mobile phone number correctly ");

Verification Form

$ ("# CheckPhoneForm "). validate ({rules: {phone: {required: true, minlength: 11, // custom method: Check whether the mobile phone number exists in the Database // checkPhoneExist: true, isMobile: true}, code: {digits: true, required: true }}, messages: {phone: {required: "Enter your mobile phone number", minlength: "Make sure that the mobile phone number cannot be less than 11 characters", isMobile: "Please enter your mobile phone number correctly"}, code: {required: "Please enter the verification code", digits: "Verification Code should enter a number" }}, errorPlacement: function (error, element) {error. appendTo (element. next (). next () ;}, ignore :". codeCls "});

HTML

<Form id = "checkPhoneForm" class = "am-form" action = "$ {base? If_exists}/check-phone-succ.html "method =" post "style =" width: 100%; "> <label for =" phone "style =" display: block; "> mobile phone number: </label> <input type = "text" id = "phone" name = "phone" value = "" maxlength = "11" style = "width: 220px; display: inline-block; margin-right: 20px; "> <! -- Send verification code button --> <input type = "button" id = "btn" value = "get verification code for free" onclick = "time (this ); "/> <span class =" errorMsg "style =" width: 200px; text-align: left; display: inline-block; "> </span> <br> <label for =" code "> Verification code: </label> <! -- Enter the verification code --> <input type = "text" name = "code" id = "code" value = "" maxlength = "4" style = "width: 220px; "> <span style =" width: 0px; text-align: left; display: inline-block; "> </span> <! -- Store error message --> <span id = "codeSpanId" class = "errorMsg" style = "width: 200px; text-align: left; display: inline-block; "> </span> <br> <div class =" am-cf "> <input type =" submit "id =" subBtn "class =" am-btn -primary am-btn-sm am-fl "value =" Next "> </div> </form>