僅接受數字的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