0

我有一个表格要应用验证：

<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 中添加，尝试以下面提到的评论者的方式处理接受率。很抱歉没有早点做。

4

2 回答 2

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');
    }
});
于 2012-12-06T17:40:48.463 回答
0

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

像这样的东西：

$('#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);
}
于 2012-12-06T17:36:42.383 回答