答案傳送門 – 給心急的你一個方便之門
RegExp 表單驗證數字
上回提到 RegExp 如何使用，這回我們來針對實務層面，實作個 input 表單驗證。
我們先來一個簡單範例，RegExp 表單驗證最常用到的，就是 From 中 input 輸入數字， 所以直接來寫一個 function ，使用 RegExp 來驗證輸入的值是否為數字 :
// 判斷是否都是數字
funciton inputNumber(v){
// 宣告 RegExp
let regex = new RegExp(/^\d+$/);
let Num = regex.test(v);
return Num;
}
console.log(inputNumber(123))
// 執行結果 true
console.log(inputNumber('123'))
// 執行結果 true
到這邊，基本的數字驗證就完成了，但對於 input 驗證還略顯不足，為什麼這麼說呢?
表單驗證 – 實務面臨的問題
在實務上，用戶輸入的值很有可能出現以下情況
- 使用複製貼上，所以前 or 後含有空白
- 輸入時夾帶英文與符號
然而，上面的 RegExp 表但驗證，針對這兩種情況的結果是:
console.log(inputNumber(' 123'))
// 執行結果 false
console.log(inputNumber('123 '))
// 執行結果 false
console.log(inputNumber(' 123 '))
// 執行結果 false
console.log(inputNumber('a123'))
// 執行結果 false
console.log(inputNumber('123abc'))
// 執行結果 false在含有英文上，期望的是 false 沒錯，但在空白上，User 會認為是 bug ，因為在站使用者角度看，他是複製“數字”貼上，但使用者並不知道，複製功能，是複製背後的文字 or HTML格式。
良好的設計，必須站在使用者實際的使用狀況下去思考，所以接下來我們來看看如何解決這兩個問題。
1. 解決後含有空白的 Input 表單輸入
這邊直接提供兩種做法:
首先來看第一種「字串過濾」，這裡我們使用到 JS 中的 replace。
- 字串過濾
- 利用轉換資料型態
方法 1 : 字串過濾
使用 Replace + RegExp Flags g 過濾空白 :
let s = " 123 abc ";
s = s.replace(/ /g, '');
console.log(s)
// 執行結果 : "123abc"方法 2 : 使用轉型 parseInt() 處裡字串 :
let s = " 123 abc ";
s = parseInt(s);
console.log(s)
// 執行結果 : 123let s = "a 123 abc ";
s = parseInt(s);
console.log(s)
// 執行結果 : NaN須留意，使用轉型 parseInt() 處裡字串，雖然能有效去除前後空白，但是:
- 只會留下開頭查詢到的第一串數字，後面全部會被捨去。
- 數字前面不能有中英文(空白除外)，否則會 NaN。
所以在使用上，要小心這兩點。
2. 解決 Input 表單輸入中英文
要解決 input 輸入中英文，其實很簡單，這裡我們要利用上面最初提到的 RegExp 進行驗證即可。
Example :
// 假設 input 輸入
let iv = 'eee123asdf';
// 判斷是否都是數字
funciton inputNumber(v){
// 宣告 RegExp
let regex = new RegExp(/^\d+$/);
let Num = regex.test(v);
return Num;
}
console.log(inputNumber(iv));
// 執行結果 false規畫你的程式設計邏輯
現在你知道了實務面的問題與解決方法，我們再回到正題 RegExp 表單驗證。
假設我們要設計一個表單驗證，需求是:
- 只能輸入數字
- 最大值 3000，最小值 0
- 用戶輸入超過 3000 上限時，顯示 3000
- 用戶刪除時，最小值顯示為 0
- 輸入錯誤時不理他，維持原狀
以上述需求為範例，製作前，建議你在腦中先有設計邏輯，或者畫出來，如下(可以點圖看):
有了設計邏輯，再依據設計邏輯來製作與調整，會比較準確，也可以避免漏掉。
按圖施工 – 開始製作一個表單驗證
下面我們試著把之前所提到的，都組合起來，實際依造設計邏輯與需求來施工。
施工 1 : JS 程式取得輸入
製作一個 function ，可以接用戶輸入 or 任何你需要驗證的值
function NumberVerify( value ){
}施工 2 : 優先過濾空白
使用 replace + RegExp 過濾字串空白，將字串中的所有空白刪除，確保用戶輸入時，不會因為誤觸空白，導致輸入失敗 or 中斷。
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
}施工 3 : 撰寫 RegExp 表單數字驗證
前面都是前置作業，這裡進入驗證主軸，我們再看一次剛剛的假設需求:
- 只能輸入數字
- 最大值 3000，最小值 0
- 用戶輸入超過 3000 上限時，顯示 3000
- 用戶刪除時，最小值顯示為 0
- 輸入錯誤時不理他，維持原狀
其中，我們可以知道，與 RegExp 有關的有 1~3項，數值的長度為4，所以 RegExp 條件如下 :
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
// 宣告 RegExp，只能輸入數字
let regex = new RegExp(/^\d{1,4}$/);
}施工 4 : 預設一個最大值、最小值
我們需要兩個變數，來預設最大值、最小值。
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
// 宣告 RegExp，只能輸入數字
let regex = new RegExp(/^\d{1,4}$/);
// 宣告 最大值、最小值
let max = 3000 , min = 0;
}施工 5 : 數值比對前置作業 – 轉換型態
數值比對，這邊就會需要用到型態轉型，雖然字串與字串之間也能進行比對，但是我麼這邊要的是數值，可以先轉型，省去其他麻煩(如誤觸輸入)。
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
// 進行數字驗證
// 宣告 RegExp，只能輸入數字
let regex = new RegExp(/^\d+$/);
// 宣告 最大值、最小值
let max = 3000 , min = 0;
// 使用轉型態，讓字串轉為數字
// 利用轉型與輸入特性，處裡數字後字串，避免誤觸
let v = parseInt(value);
}需求 5 輸入錯誤時不理他，維持原狀，在轉型時，就已經順便做好了。
這邊是利用輸入的特性，新輸入的值都是在右邊，所以轉型態時，如果用戶不小心誤觸，例如原先輸入 “100”，接著不小心誤觸 a 倒置輸入變成 “100a”，那這時轉型成數字，就會將 “100a” 變成 100 ，自然就解決誤觸的問題。
施工 6 : 進行數值驗證與比對
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
// 進行數字驗證
// 宣告 RegExp，只能輸入數字
let regex = new RegExp(/^\d+$/);
// 宣告 最大值、最小值
let max = 3000 , min = 0;
// 使用轉型態，讓字串轉為數字
// 利用轉型與輸入特性，處裡數字後字串，避免誤觸
let v = parseInt(value);
// 進行數值驗證與比對
value = regex.test(v.toString()) ? v < min ? min : v > max ? max : v : min;
}施工 7 : 回傳 – 完成驗證
function NumberVerify( value ){
// 過濾空白
value = value.replace(/ /g, '');
// 進行數字驗證
// 宣告 RegExp，只能輸入數字
let regex = new RegExp(/^\d+$/);
// 宣告 最大值、最小值
let max = 3000 , min = 0;
// 使用轉型態，讓字串轉為數字
// 利用轉型與輸入特性，處裡數字後字串，避免誤觸
let v = parseInt(value);
// 進行數值驗證與比對
value = regex.test(v.toString()) ? v < min ? min : v > max ? max : v : min;
return value;
}到這邊，你已經完成了一個用於數字的表單驗證。
結論
以上就是一個簡單的利用 RegExp 製作數字表單驗證的過程，當然程式每個人思考路項不同，自然寫法也不同，這邊只是提供一個簡單的 example，如果有更好的寫法也歡迎一同討論。
1 則自動引用通知