紀錄工作經驗、相關知識,解決技術相關問題。

Javascript

Input RegExp 表單驗證 – 只輸入數字

input RegExp number

input RegExp number

答案傳送門 – 給心急的你一個方便之門

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 驗證還略顯不足,為什麼這麼說呢?

表單驗證 – 實務面臨的問題

在實務上,用戶輸入的值很有可能出現以下情況

  1. 使用複製貼上,所以前 or 後含有空白
  2. 輸入時夾帶英文與符號

然而,上面的 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. 字串過濾
  2. 利用轉換資料型態

方法 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)

// 執行結果 : 123
let 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 表單驗證

假設我們要設計一個表單驗證,需求是:

  1. 只能輸入數字
  2. 最大值 3000,最小值 0
  3. 用戶輸入超過 3000 上限時,顯示 3000
  4. 用戶刪除時,最小值顯示為 0
  5. 輸入錯誤時不理他,維持原狀

以上述需求為範例,製作前,建議你在腦中先有設計邏輯,或者畫出來,如下(可以點圖看):

只能輸入數字-表單驗證設計邏輯
只能輸入數字-表單驗證設計邏輯

有了設計邏輯,再依據設計邏輯來製作與調整,會比較準確,也可以避免漏掉。

按圖施工 – 開始製作一個表單驗證

下面我們試著把之前所提到的,都組合起來,實際依造設計邏輯與需求來施工。

施工 1 : JS 程式取得輸入

製作一個 function ,可以接用戶輸入 or 任何你需要驗證的值

function NumberVerify( value ){

}

施工 2 : 優先過濾空白

使用 replace + RegExp 過濾字串空白,將字串中的所有空白刪除,確保用戶輸入時,不會因為誤觸空白,導致輸入失敗 or 中斷。

function NumberVerify( value ){
  // 過濾空白
  value = value.replace(/ /g, '');
}

施工 3 : 撰寫 RegExp 表單數字驗證

前面都是前置作業,這裡進入驗證主軸,我們再看一次剛剛的假設需求:

  1. 只能輸入數字
  2. 最大值 3000,最小值 0
  3. 用戶輸入超過 3000 上限時,顯示 3000
  4. 用戶刪除時,最小值顯示為 0
  5. 輸入錯誤時不理他,維持原狀

其中,我們可以知道,與 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,如果有更好的寫法也歡迎一同討論。

發表迴響