使用javascript檢查輸入字段是否為數字和長度

Question

使用此Java腳本，我只允許數字輸入，這很好。 但是，我很難通過3個額外的檢查來擴展功能。 我可以在Java腳本中使用一些幫助。

需要進行3種不同的檢查：

1）信用卡號=數字，長度為16，否則錯誤消息

2）到期日期=只能選擇，但必須等於或大於實際的月/年

3）CCV =數字，長度為3

除了數字輸入之外，這確實會阻止其他任何內容：

<script type="text/javascript" >
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}
</script>

對於我嘗試的長度：

function LengthCheck16() {
    var str = document.getElementById("CardNumber").value;
    var n = str.length;
    document.getElementById("CardNumber").innerHTML = n;
    if ((n > 16) || (n < 16))
    {
    document.getElementById("lblMessage").value = "Please enter a valid credit card number";
    }
}

我創建了一個包含2個函數的函數，但是它根本不起作用。

function CCLC16(e) {
IsNumeric(e);
LengthCheck16();
}

信用卡號字段

<td> <input type="text" id='CardNumber' name="EPS_CARDNUMBER" onkeypress="return IsNumeric(event);" ondrop="return false;" /></td>

== >>如果我刪除跨度，那根本不起作用（我從其他地方得到了這個主意）

到期日

  <td style="width: 130px"> <asp:Label ID="Label3" runat="server" Text="Expiry: "> </asp:Label></td>
         <td> <%--     Expiry Month/Year: <select name="EPS_EXPIRYMONTH">--%>
                <select name="EPS_EXPIRYMONTH">
                           <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            <%--     <input type="text" name="EPS_EXPIRYYEAR" />--%>
                <select name="EPS_EXPIRYYEAR">
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                    <option value="2026">2026</option>
                    <option value="2027">2027</option>
                    <option value="2028">2028</option>
                    <option value="2029">2029</option>
                    <option value="2030">2030</option>
                </select></td>

CCV

<td>
                    <input type="text" name="EPS_CCV" style="width: 41px" onkeypress="return IsNumeric(event);" ondrop="return false;" /></td>

如果有人可以告訴我如何只為一個功能編寫更好的代碼，我將感謝您的反饋。

Answer 1

考慮以下：

var a = 123;
var b = "123";

它們的輸出看起來相同，但是“ a”是number ，“ b”是string 。 如果您想知道任何變量的變量類型，可以這樣獲得：

console.log(typeof a);
console.log(typeof b);

來自表單字段的值通常為string類型。 要快速檢查變量是否為數字，而不管它實際上是字符串還是數字，可以按以下方式檢查它：

if (!isNaN(b))
{ /* it is a number, do stuff*/ }

要么

if(isNaN(b -1))
{ /* there maybe be some other characters in there*/ }

Answer 2

在網上進行研究並在另一個網站上獲得提示后，我對方法進行了一些更改。

首先，我禁用了除數字以外的任何其他輸入：

 <td> <input type="text" id="CardNumber" name="EPS_CARDNUMBER" onkeypress="return IsNumeric(event);" /> </td>

// everything else then numeric answer is blocked
    function IsNumeric(e) {
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    var keyCode = e.which ? e.which : e.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}

我決定在有人按下“提交”按鈕時檢查驗證：

    // check when pushing submit button
    function CCValidation() {
        if (CreditCard()) { } else { return; }
        if (ExpiryDate()) { } else { return; }
        if (CVV()) { } else { return; }
    }

    // check for creditcard
     function CreditCard() {
        var CreditNumber = document.getElementById("CardNumber").value;
        if (LengthCheck(CreditNumber, 16)) { return true }
        else {
            alert("Please enter a 16-digit CreditCard Number");
            //document.getElementById('lblMessage').innerHTML = 'CC wrong';
            //return false;
        }
    }

    // verifying date
    function ExpiryDate() {
        //var ExpiryMonth = 
        //var ExpiryYear = 
        DateEntered = new Date((document.getElementById("ExpiryYear").value),((document.getElementById("ExpiryMonth").value)))*1;
        Today = new Date()*1;
        if (DateEntered <= Today) {
            alert("Your expiry date cannot be lower than todays's date!", DateEntered, Today);
            return false;
        }
        else { return true; }
    }

    // check for ccv
    function CVV() {
        var CCVValue = document.getElementById("CCV").value;
        if (LengthCheck(CCVValue, 3)) { }
        else {
            alert("Please enter a 3-digit CCV")
            return;
        }
    }

    // verifying length
    function LengthCheck(Value, Length) {
        if (String(Value).length != Length) { return false; }
        return true;
    }

</script>