使用javascript检查输入字段是否为数字和长度

时间:2014-11-13 01:38:03

标签: javascript input numeric maxlength

使用这个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>

==&GT;&GT;如果我删除跨度它根本不起作用(我从其他地方得到了想法)

失效日期

  <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>

如果有人能告诉我如何更好地写这个,即使只有一个功能,我也很感激反馈。

2 个答案:

答案 0 :(得分:0)

请考虑以下事项:

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*/ }

答案 1 :(得分:0)

在我研究网络并获得另一个网站的提示后,我稍微改变了方法。

首先,我禁用了除数字之外的任何其他输入:

 <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>