JavaScript 只能輸入數字

一、什麼是JavaScript只能輸入數字

JavaScript 只能輸入數字是指在輸入框中，JavaScript 能夠限制用戶只能輸入數字類型的數據，同時還能進行一些其他的數據驗證。

在開發中，限制輸入格式是十分重要的，特別是在需要輸入敏感的信息時，如身份證號碼、電話號碼、銀行卡號等，JavaScript 可以幫助我們定製輸入格式、處理特殊字元等

二、如何實現JavaScript只能輸入數字

實現JavaScript 只能輸入數字的方法有很多，以下分別介紹。

1.使用正則表達式

    function checkNum(e) {
        var num = /^[0-9]*$/;
        if(!num.test(e.value)){
            alert('只能輸入數字');
            e.focus();
            return false;
        }
    }
    輸入框：

當用戶輸入非數字字元時，正則表達式判斷不通過，觸發提示，並調用 focus() 方法將滑鼠聚焦到輸入框中

2.使用 HTML5 的 input 標籤屬性

    輸入框：

該方法使用 HTML5 中的 input 標籤的 type 屬性為 number，同時還可設置 min 和 max 屬性限制輸入數據的範圍。

3.使用 isNaN() 函數

    function checkNum(num) {
        if(isNaN(num)){
            alert('只能輸入數字');
            return false;
        }
    }
    輸入框：

當用戶輸入非數字字元時，isNan() 函數判斷不通過，觸發提示

三、其他數據驗證

除了只能輸入數字，JavaScript 還可以進行其他輸入的數據驗證，如郵箱、密碼等。

1.電子郵箱驗證

    function checkEmail(email) {
        var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!emailReg.test(email)){
            alert('請輸入有效的郵箱地址');
            return false;
        }
    }
    輸入框：

2.密碼格式驗證

密碼格式驗證可包含數字、字母、特殊字元的組合，以下為一個簡單的示例。

    function checkPassword(password) {
        var passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        if(!passwordReg.test(password)) {
            alert('密碼格式不正確');
            return false;
        }
    }
    輸入框：

四、總結

JavaScript 只能輸入數字是我們開發中常用的一種數據驗證技巧，能有效限制用戶輸入不符合規範的數據，並保證輸入的數據有效性。

值得注意的是，在進行數據驗證時，我們應該兼顧用戶體驗。如果數據驗證過於嚴格，容易讓用戶產生誤解，降低用戶體驗感。