Jquery practice case -- verify the mobile phone number and jquery case
If you want to verify the mobile phone number, you need to know the number segment of the mobile phone number.
// Supported mobile phone numbers: 134 135 136 137 138 139 147 150 151 152 157 158 159 182 183 187 188 // The supported mobile phone numbers are as follows: 130 131 132 155 156 186 // supported by the Telecommunications Number of the region: 145 133 153 189 180 // mobile operator: 170
Mobile: 2G segment (GSM): 134-139, 150, 151, 152-158; 3G segment (TD-SCDMA): 159, 157, 187, 188. china Unicom: 2G segment (GSM): 130-132, 155-156; 3G segment (WCDMA): 185, 186. china Telecom: 2G segment (CDMA): 133, 153; 3G segment (CDMA 2000): 180, 189.
Write a regular expression: var myreg =/^ (13 [0-9] {1}) | (14 [0-9] {1 }) | (17 [0] {1}) | (15 [0-3] {1}) | (15 [5-9] {1 }) | (18 [0-9] {1}) + \ d {8}) $ /;
<Input type = "text" id = "phone" name = "phone"/>
First introduce a JQuery framework:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
Function for mobile phone number verification:
// Verify the mobile phone number function vailPhone () {var phone = jQuery ("# phone "). val (); var flag = false; var message = ""; var myreg =/^ (13 [0-9] {1 }) | (14 [0-9] {1}) | (17 [0] {1}) | (15 [0-3] {1 }) | (15 [5-9] {1}) | (18 [0-9] {1}) + \ d {8}) $ /; if (phone = '') {message =" the mobile phone number cannot be blank! ";} Else if (phone. length! = 11) {message = "enter a valid mobile phone number! ";} Else if (! Myreg. test (phone) {message = "enter a valid mobile phone number! ";} Else if (checkPhoneIsExist () {message =" this phone number has been bound! ";}Else {flag = true;} if (! Flag) {// error message // jQuery ("# phoneDiv "). removeClass (). addClass ("ui-form-item has-error"); // jQuery ("# phoneP" ).html (""); // jQuery ("# phoneP" example .html ("<I class = \" icon-error ui-margin-right10 \ "> & nbsp; <\/I>" + message ); // jQuery ("# phone "). focus ();} else {// prompt for correct results // jQuery ("# phoneDiv "). removeClass (). addClass ("ui-form-item has-success"); // jQuery ("# phoneP" ).html (""); // jQuery ("# phoneP" developer.html ("<I class = \" icon-success ui-margin-right10 \ "> & nbsp; <\/I> this phone number is available ");} return flag ;}
Send a request to the backend:
// Verify whether the mobile phone number has function checkPhoneIsExist () {var phone = jQuery ("# phone "). val (); var flag = true; jQuery. ajax ({url: "checkPhone? T = "+ (new Date ()). getTime (), data: {phone: phone}, dataType: "json", type: "GET", async: false, success: function (data) {var status = data. status; if (status = "0") {flag = false ;}}); return flag ;}
Java backend Verification:
@ RequestMapping (value = "/checkPhone", method = RequestMethod. GET) public void checkPhone (HttpServletRequest request, HttpServletResponse response) {Map <String, Object> map = new HashMap <String, Object> (); try {String phone = request. getParameter ("phone"); String status = "0"; // write the query logic. If yes, mark it as 1; otherwise, mark it as 0 // UserCellphoneAuth userCellphoneAuth = userService. findUserCellphoneAuthByPhone (phone); // if ( UserCellphoneAuth! = Null) {// status = "1"; //} map. put ("status", status); String data = JSONObject. fromObject (map ). toString (); response. getWriter (). print (data); response. getWriter (). flush (); response. getWriter (). close ();} catch (Exception ex) {logger. error (ex. getMessage (), ex );}}