仅接受数字的JQuery验证问题。

Question

我有一个要验证的表格。 这是html

<h2>Personal Details</h2>
            <p>Please enter in some information about you.</p>
            <div id="form-row">
                <label>Name</label>
                <input type="text" name="name" value="" id="name" required/>
            </div>
            <div id="form-row">
                <label>Telephone</label>
                <input type="text" name="telephone" value="" id="telephone" required/>
            </div>
            <div id="form-row">
                <label>Email</label>
                <input type="email" name="email" value="" id="email" required/>
    </div>

我需要使用某种形式的validation所以我选择使用名为.validate jQuery验证插件。 这是我的script

$(document).ready(function($) {
    //When the form is submitted do this...
    $("#stripe-payment-form").submit(function(event) {

        //Validation
        // just for the demos, avoids form submit
        $.validator.setDefaults({
            debug: true,
            success: "valid"
        });

        $( "#stripe-payment-form" ).validate({
            rules: {
                telephone: {
                    required: true,
                    digits: true
                    }
            }
        });

第一次加载页面时，我没有收到任何错误，验证工作正常。 但是，如果在telephone输入中输入“ aaa”，则会出现此错误，并且不会进行验证：

TypeError: $.validator is undefined

有人知道为什么会这样吗？ 我一直在遵循有关的文档

http://jqueryvalidation.org/digits-method

Answer 1

您需要在jquery之后包含jquery.validate.js文件，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

另外，您的JavaScript代码应如下所示：

$(document).ready(function() {
    $( "#stripe-payment-form" ).validate({
        rules: {
            telephone: {
                required: true,
                digits: true
                }
        }
    });
});

无需将其包装在表单提交事件中。 它将自己完成。 如果要在表单提交上执行其他操作，请使用SubmitHandler选项。

Answer 2

您还可以通过开发一个函数并根据需要调用它来编写代码。

var only_Number;
$(function(){
    $('.onlynumber').keypress(function(){
        return only_Number();
    });

    only_Number=function(evt){
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
});

也可以看一下Codepen： http ：//codepen.io/ahmadasjad/pen/bNMmya