Vue正則表達式詳解

一、Vue正則表達式是什麼

Vue正則表達式是指在Vue框架中使用正則表達式進行數據驗證和轉換的一種表達式。正則表達式是一種通用的字符串模式匹配工具，以字符序列（如：字母、數字、空格、符號等）為基礎，用簡潔的語法描述字符串格式。

二、Vue正則表達式的常用用法

以下是Vue正則表達式常用的幾種用法:

1. Vue正則表達式d

Vue正則表達式d可以用來匹配任意一個數字，功能類似於「[0-9]」。示例代碼如下：

<template>
  <div>
    <input type="text" v-model="num" :maxlength="1" @input="onlyNumber">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: ''
    };
  },
  methods: {
    onlyNumber() {
      this.num = this.num.replace(/\D+/, ''); // 使用Vue正則表達式d，只允許輸入數字
    }
  }
};
</script>

2. Vue正則表達式0100的正整數

Vue正則表達式0100的正整數用來匹配01-100之間（包括1和100）的整數，示例代碼如下：

<template>
  <div>
    <input type="text" v-model="num" :maxlength="3" @input="limitNum">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: ''
    };
  },
  methods: {
    limitNum() {
      this.num = this.num.replace(/^(0|[1-9]\d{0,1}|100)$/, ''); // 使用Vue正則表達式0100的正整數，只允許輸入01-100之間的整數
    }
  }
};
</script>

3. Vue正則表達式怎麼使用

Vue正則表達式可以在JS中直接使用，比如字符串的匹配和替換等，示例代碼如下：

let str = 'I am a developer, and I love Vue.js!';
let reg = /Vue\.js/g; // 使用Vue正則表達式
let result = str.replace(reg, 'React'); // 將匹配到的字符串替換成React
console.log(result); // I am a developer, and I love React!

4. Vue正則表達式只能是數字

Vue正則表達式可以用來限制輸入框只能輸入數字，示例代碼如下：

<template>
  <div>
    <input type="text" v-model="num" maxlength="4" @input="onlyNumber">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: ''
    };
  },
  methods: {
    onlyNumber() {
      this.num = this.num.replace(/\D/g, ''); // 使用Vue正則表達式，只允許輸入數字
    }
  }
};
</script>

5. Vue正則表達式寫法

Vue正則表達式的寫法和JS正則表達式的寫法基本相同，只不過需要使用Vue的模板語法，示例代碼如下：

<template>
  <div>
    <input type="text" v-model="name" @input="checkName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    checkName() {
      let reg = /^[\u4e00-\u9fa5]{2,4}$/; // 使用Vue正則表達式寫法，限制姓名只能輸入中文
      if (!reg.test(this.name)) {
        this.name = '';
      }
    }
  }
};
</script>

6. Vue正則表達式4位數字

Vue正則表達式可以用來限制輸入框只能輸入4位數字，示例代碼如下：

<template>
  <div>
    <input type="text" v-model="code" maxlength="4" @input="onlyNumber">
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: ''
    };
  },
  methods: {
    onlyNumber() {
      this.code = this.code.replace(/\D/g, ''); // 使用Vue正則表達式，只允許輸入數字
      if (this.code.length > 4) {
        this.code = this.code.slice(0, 4); // 限制輸入框只能輸入4位數字
      }
    }
  }
};
</script>

7. Vue正則表達式匹配字符串

Vue正則表達式可以用來匹配字符串中的某些內容，示例代碼如下：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'I am a frontend developer'
    };
  },
  created() {
    let reg = /frontend/; // 使用Vue正則表達式匹配字符串中的某些內容
    this.message = this.message.replace(reg, 'backend'); // 將匹配到的字符串替換成backend
  }
};
</script>

三、常用的正則表達式語法

以下是常用的正則表達式語法：

• [abc] 匹配a、b、c中的任意一個字符。
• [^abc] 匹配除了a、b、c之外的任意一個字符。
• [0-9] 匹配任意一個數字。
• [A-Z] 匹配任意一個大寫字母。
• [a-z] 匹配任意一個小寫字母。
• [A-Za-z] 匹配任意一個字母。
• . 匹配任意一個字符（除了換行符）。
• ^ 匹配輸入字符串的開始位置。
• $ 匹配輸入字符串的結束位置。
• * 匹配前面的字符出現了0次或多次。
• + 匹配前面的字符出現了1次或多次。
• ? 匹配前面的字符出現了0次或1次。
• {n} 匹配前面的字符出現了n次。
• {m,n} 匹配前面的字符至少出現了m次、至多出現了n次。
• | 匹配正則表達式的任意一個分支選擇項。
• () 用於定義正則表達式中的子組。

四、正則表達式大全

以下是一些常用的正則表達式：

• 非負整數: /^\d+$/。
• 正整數: /^[1-9]\d*$/。
• 負整數: /^-[1-9]\d*$/。
• 整數: /^-?\d+$/。
• 非負浮點數: /^\d+(\.\d+)?$/。
• 正浮點數: /^[1-9]\d*\.\d+|0\.\d*[1-9]\d*$/。
• 負浮點數: /^-[1-9]\d*\.\d+|-0\.\d*[1-9]\d*$/。
• 浮點數: /^(-?\d+)(\.\d+)?$/。
• URL地址: /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/[\w.-]*)*\/?$/。
• 郵箱地址: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/。
• 手機號碼: /^1[3456789]\d{9}$/。
• 身份證號碼: /^\d{15}$|^\d{18}$|^\d{17}(\d|X|x)$/。
• 中文字符: /^[\u4e00-\u9fa5]+$/。
• HTML標記: /]*>.*?|/g。
• IP地址: /^\d+\.\d+\.\d+\.\d+$/。
• 日期格式: /\d{4}-\d{2}-\d{2}/。
• 時間格式: /\d{1,2}:\d{1,2}(:\d{1,2})?/。