Question

当我输入一些十进制数字（例如1.1）时 - 数字验证工作正常。但是当我输入一些文本时，对于例如 abcdef - 我的自定义规则正在运行，而不是数字验证。你知道这可能是什么问题吗？

$(function() {

        $("<div id='errorContainer'>There are some errors:</div>").addClass("losInput").append("<ul id='errorLabelContainer'></ul>").hide().insertAfter("h1");

        $.validator.addMethod('stock', function(value, elem) {
            return Number(value) <= Number($(elem).attr("stock"))
        }, "We don't have that many in stock");

        var rules= [];
        $("input").each(function(index, elem) {
            rules[$(elem).attr("name")] = {
                required: true,
                digits: true,
                min: 0,
                stock: true
            }
        });

        var messages= [];
        $("input").each(function(index, elem) {
            messages[$(elem).attr("name")] = {
                required: "Field"+$(elem).attr("name")+" is required;",
                digits: "Only digits...",
                min: "Value in "+$(elem).attr("name")+" must be >= 0.",
                stock: "We have only "+Number($(elem).attr("stock"))+" in stock"
            }
        });

        $("form").validate({
            errorContainer: "#errorContainer",
            errorLabelContainer: "#errorLabelContainer",
            wrapper: "li",
            errorElement: "div",
            errorClass: "losInput",
            rules: rules,
            messages: messages
        });

        $("input").change(function(e) {
            $("form").validate().element($(e.target))
        });

    })

HTML code：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link href="../styles/main.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.validate.min.js"></script>
    <style type="text/css">
        .invalidElem {
            border: medium solid red;
         }
        .losInput {
            color: red;
        }
    </style>
    <script type="text/javascript">
         // see above
    </script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form id="forma" name="forma" method="post">
    <div id="oblock">
        <div class="dtable">
            <div class="drow" id="drow1">
                <div class="dcell">
                    <img src="../images/aster.png"/>
                    <label for="aster">Aster:</label>
                    <input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required>
                </div>
                <div class="dcell">
                    <img src="../images/daffodil.png"/>
                    <label for="daffodil">Daffodil:</label>
                    <input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required >
                </div>
                <div class="dcell">
                    <img src="../images/rose.png"/>
                    <label for="rose">Rose:</label>
                    <input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required>
                </div>
            </div>
        </div>
    </div>
    <div id="buttonDiv">
        <button type="submit">Place Order</button>
    </div>
</form>
</body>
</html>

键入字母时数字验证无效 - jQuery验证

0 个答案: