SoFunction
Updated on 2025-03-06

Examples of front-end Vue mobile phone number verification and back-end Java mobile phone number verification

Preface

The knowledge I will share with you today is front-end Vue mobile phone number verification and back-end Java mobile phone number verification. These two are also problems I encountered during the development process. Now let me share with you my solution.

1. Front-end Vue mobile phone number verification

Here I have written a very simple example. You can refer to it and make improvements based on it. The code is as follows:

<template>
  <div>
    <label>Please enter your mobile phone number：</label>
    <el-input type="text" v-model="phone" @blur="validatePhone" />
    <span v-if="!validPhone">Please enter a valid mobile phone number！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', //The mobile phone number bound to the input box      validPhone: true //Control whether span appears    }
  },
  methods: {
    validatePhone() {
      // Mobile phone number regular expression      const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      // Verify mobile phone number      if (!()) {
         = false
      } else {
         = true
      }
    }
  }
}
</script>

The key codes are commented. If you don’t understand, you can send me a private message.

Here I put the verification rules into the @Blur method, @Blur is the event triggered when the element loses focus. You can also put it in the form verification rules.

2. Backend Java mobile phone number verification

I also wrote a simple example for your reference in the backend. I did a small process before verification and removed the front and back spaces of the string. The code is as follows:

    String mobile = " 15800000000  ";
	String phone = (); //Clear the extra spaces at the beginning and end of the mobile phone number (the spaces in the middle will not be removed, only the beginning and end spaces will be removed)	String regex = "^1[3-9]\\d{9}$"; //Mobile phone number regular expression	Pattern pattern = (regex);  //Colle the regular expression into a Pattern object by calling the() method and assign it to the variable pattern	Matcher matcher = (phone);	//The given Pattern object (pattern) creates a Matcher object to perform regular expression matching operations in the specified string	if(()){
        ("The verification is successful, it is a legal mobile phone number");
    }else{
        ("Verification failed, not a legal mobile phone number");
    }

The specific codes also indicate comments. If you don’t understand, you can send me a private message. Welcome to disturb me~

Summarize

This is the article about front-end Vue mobile phone number verification and back-end Java mobile phone number verification. For more related content on Vue Java mobile phone number verification, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!