Question

我有一个表单我想将验证应用到：

<form id="calculator">

            <div class="f-field">
                <label for="sale-price">Sale Price</label>
                <input id="sale-price" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="agent-commission">Highstreet agent commission</label>
                <input id="agent-commission" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="sale-time">Estimated sale time</label>
                <input id="sale-time" type="text" value=""/>
            </div>

            <div class="f-field">
                <input type="button" value="Calculate" id="calc-button"/>  
            </div>

        </form>

到目前为止我的jQuery：

 $(document).ready(function(){

        $('#calc-button').click(function(){

            var answer = 

            parseInt($('#sale-price').val()) / 
            parseInt($('#agent-commission').val()) + 
            parseInt($('#sale-time').val());

            var validate= false;
            $("#calculator input[type='text']").each(function(){
                if($(this).val() != '' || $(this).attr('checked'))
                    validate = true;
            });
            if(!validate){
                alert('Please select at least one filter');
                return false;
            }
            else { 
                $('#calc-val').html('£' + answer);
            }

        });
    });

是否有一种简单的方法可以在3个字段上设置验证，这些字段都只有数字值。我想验证一个数字的存在，所以任何不是数字或根本没有任何东西的东西都会抛出一条消息。

我真的想避免使用完整的jQuery插件，因为我确信有一种方法可以使用这么小的表单，但是我正在寻找有关这方面的建议。

编辑在我的jQuery中添加，尝试以下面提到的评论者的方式处理接受率。很抱歉没有尽快完成。

Answer 1

这是一个有效的FIDDLE

当用户输入时，这将删除任何非数字的内容......

$("#sale-price, #agent-commission, #sale-time").on("keyup keypress keydown blur input change", function() {

    // Remove All Non Numbers
    $(this).val($(this).val().replace(/[^0-9]/gi, ""));

});

然后检查以确保sumbit

上的值不为空

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( ($('#sale-price').val() && $('#agent-commission').val() && $('#sale-time').val() ) != '' ) {
        $(this).submit();
    }
    else {
        alert('Please Fill In All Fields');
    }
});

Answer 2

当然，只需将处理程序绑定到submit事件，并阻止表单提交，除非值与您想要的值匹配。

这样的事情：

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( isNumber( $('#sale-price').val() ) && isNumber( $('#agent-commission').val() ) && isNumber( $('#sale-time').val() ) ) {
        $(this).submit();
    }
    else {
        // errors in form
    }
});

// from http://stackoverflow.com/a/1830844/551093
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

使用jQuery验证3个表单字段

2 个答案: