前端Vue手機號校驗以及后端Java手機號校驗例子

更新時間：2023年11月24日 09:35:05 作者：亞不帥

接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機號校驗以及后端Java手機號校驗的相關(guān)資料,需要的朋友可以參考下

前言

今天給大家分享的知識是前端Vue手機號校驗以及后端Java進行手機號校驗，這兩個也是我在開發(fā)過程中遇到的問題，現(xiàn)在來給大家分享一下我的解決辦法。

一、前端Vue手機號校驗

在這里我寫了一個很簡單的小例子，大家可以參考一下，在此基礎(chǔ)上進行改進，代碼如下：

<template>
  <div>
    <label>請輸入手機號碼：</label>
    <el-input type="text" v-model="phone" @blur="validatePhone" />
    <span v-if="!validPhone">請輸入有效的手機號碼！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', //input框綁定的手機號
      validPhone: true //控制span是否出現(xiàn)
    }
  },
  methods: {
    validatePhone() {
      // 手機號正則表達(dá)式
      const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      // 驗證手機號
      if (!reg.test(this.phone)) {
        this.validPhone = false
      } else {
        this.validPhone = true
      }
    }
  }
}
</script>

關(guān)鍵代碼都有注釋，如有不明白的可以私信我。

在這里我是將校驗規(guī)則放到了@Blur方法里，@Blur 是當(dāng)元素失去焦點時所觸發(fā)的事件。大家也可以放到表單校驗規(guī)則里。

二、后端Java手機號校驗

后端我也寫了一個簡單的小例子供大家參考，我在校驗之前做了一個小處理，將字符串的前后首尾空格去掉了。代碼如下：

    String mobile = " 15800000000  ";
	String phone = mobile.trim(); //清空手機號首尾多余空格(中間有空格不會去除，只會去除首尾空格)
	String regex = "^1[3-9]\\d{9}$"; //手機號正則表達(dá)式
	Pattern pattern = Pattern.compile(regex);  //通過調(diào)用Pattern.compile()方法，將該正則表達(dá)式編譯成一個Pattern對象，并將其賦值給變量pattern
	Matcher matcher = pattern.matcher(phone);	//給定的Pattern對象（pattern）創(chuàng)建一個Matcher對象，用于在指定的字符串中執(zhí)行正則表達(dá)式匹配操作
	if(marcher.matches()){
        System.out.println("驗證成功，是合法手機號碼");
    }else{
        System.out.println("驗證失敗，不是合法手機號碼");
    }

具體的代碼也都標(biāo)明了注釋，大家如有不明白的可以給我發(fā)私信，歡迎打擾~