關於 Reg Ex 正規表達式
正規表達式筆記
正規表達式所使用的符號
正規表達式是指一組能夠用來表達字串共用格式的樣式，只要是字串比對與字串取代等字串相關功能，都會用到正規表達式
| 語法 | 正規表達式 | 範例 |
| 整數 | [0-9]+ | 5815 |
| 浮點數 | [0-9]+.[0-9]+ | 58.15 |
| 純英文字串 | [A-Za-z]+ | CGuIM |
| [a-zA-Z0-9]+@[a-zA-Z0-9.]+ | im@mail.cgu.edu.tw | |
| URL | http://[a-zA-Z0-9./_]+ | http://www.is.cgu.edu.tw/ |
| 以任一順序對括號中的字元與字串 | [abc] | a、ab、abc、cba、ca ... |
| 數量標示 | {} | 表示數值出現的次數 |
| {10} | 代表10個 | |
| {10,} | 10個以上 | |
| {1,5} | 1到5個 | |
| 縮寫 | \w | [a-zA-Z] |
| \d | [0-9] | |
| 比對結尾與符號鄰接字元一致的字串 | ap$ | le'ap' //無法完全比對，只會比對 ap |
正規表達式範例
- 手機號碼: 開頭到結尾都必須是數字。不得有連字符號
- ^\d{10}$
- 郵局區號 5 碼數字
- ^[1-9]\d{4}$
- 身分證字號:一碼英文大寫搭配9碼數字
- ^[A-Z]\d{9}$
- 西元出生年月日: 以1901/2/28表示
- ^\d{4}/\d{1,2}/\d{1,2}
Vue Cli 範例
簡易測試是否輸入正確
<template lang="pug">
.home
div
label 請輸入您的身分證字號
input(v-model="userName")
p {{userName}}
p {{errMsg}}
</template>
<script>
export default {
name: "Home",
data() {
return {
userName: 123,
errMsg:''
};
},
watch: {
userName: function(value) {
if (this._valid(value)) {
this.errMsg = "正確地輸入身分證字號";
} else {
this.errMsg = "錯誤";
}
}
},
methods: {
_valid(name) {
return /^[A-Z]\d{9}$/.test(name);
}
}
};
</script>
<template lang="pug">
.home
div
label 請輸入您的身分證字號
input(v-model="userName")
p {{userName}}
p {{errMsg}}
</template>
<script>
export default {
name: "Home",
data() {
return {
userName: 123,
errMsg:''
};
},
watch: {
userName: function(value) {
if (this._valid(value)) {
this.errMsg = "正確地輸入身分證字號";
} else {
this.errMsg = "錯誤";
}
}
},
methods: {
_valid(name) {
return /^[A-Z]\d{9}$/.test(name);
}
}
};
</script>
參考資料