表单验证 - 最小数值答案

【问题标题】：Form validation - Minimum number value表单验证 - 最小数值
【发布时间】：2013-06-27 18:23:50
【问题描述】：

有人可以就限制输入低于 5 的数字的表单验证向我提供一些建议。我有一个捐赠表格，只有一个金额输入字段和一个到 paypal 的提交按钮。

如果金额值低于 5（5 英镑），我应该使用什么表单验证来限制表单的提交。

表格如下：

<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
    <div class="span6 text-center">
            <input type="hidden" name="cmd" value="_cart">
            <input type="hidden" name="business" value="SECRET-ID">
            <input type="hidden" name="lc" value="GB">
            <input type="hidden" name="item_name" value="General">
            <input type="hidden" name="item_number" value="GEN">
        <div class="input-prepend input-append">
            <span class="add-on">£</span>
            <input class="span12" name="amount" value="5" placeholder="Enter Donation Amount" id="appendedPrependedInput" size="20" type="text">
            <input type="hidden" name="currency_code" value="GBP">
            <input type="hidden" name="button_subtype" value="products">
            <input type="hidden" name="no_note" value="0">
            <input type="hidden" name="cn" value="Add special instructions to the seller:">
            <input type="hidden" name="no_shipping" value="2">
            <input type="hidden" name="add" value="1">
            <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest">
        </div>
    </div>
    <div class="span6 text-center">
        <div class="controls">


    <a id="buynow" class="btn btn-danger" href="#" rel="nofollow" onclick="document.getElementById('donate').submit(); return false;">
        <span style="">Donate via PayPal!</span></a>
    <noscript>
        <style>#buynow { display: none; } #page_theme #donate input { display: inline; }</style>
        <input type="submit" class="btn btn-danger" value="Donate via PayPal!">
    </noscript>             
        </div>  
    </div>  
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">          
</form>

【问题讨论】：

为什么？如果是捐赠，为什么需要最低限度？
看起来很简单。您在网络上尝试过或发现了什么？
我真的不想要一笔 1 便士的捐款，这会让慈善机构支付贝宝费用...@relentless

标签： php javascript forms validation twitter-bootstrap

【解决方案1】：

在你的情况下，我会使用parsley.js

所以要在您的表单上使用 parsley（安装后），请将此数据属性添加到您的表单：

data-validate="parsley"

应该是这样的：

<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" data-validate="parsley" method="post" >

并为您的输入添加以下数据属性（阅读文档了解更多验证规则）：

data-min="6"

所以它应该是这样的：

<input class="span12" name="amount" value="5" placeholder="Enter Donation Amount"  data-min="6" id="appendedPrependedInput" size="20" type="text">

就是这样。

【讨论】：

太完美了！我对表单的编码不多，所以我对最好的验证服务没有太多经验！现在正在为它添加书签.. 非常感谢！

【解决方案2】：

其中有很多，但由于大多数人已经在使用 JQuery 并且他们想要使用客户端验证，所以我会使用 Jquery Validation。请记住，对于后端，您必须使用自己的 PHP、C# 或任何您需要的验证。如果你不使用 JQuery，我会使用 this

【讨论】：

【解决方案3】：

如果您想要一个非常简单的前端解决方案，您可以使用附加到输入元素的 onblur 事件的 Javascript 函数来测试输入的值：

<input type="text" name="amount" onblur="checkValue(this)" />

在附加的函数中，传递元素并检查该元素的值：

function checkValue(element){
    if(element.value < 5){
        alert('The minimum donation is 5.00!');
        // clear value, display message, etc.
    }
}

只要光标离开输入框，就会触发这个函数。一个简单的警报可能就是您所需要的。您可能还需要添加额外的检查以确保元素输入实际上是数字而不是字符串。最好假设最终用户不知道如何使用该表单。

请注意，这只是一个前端解决方案，所有提交的表单都应使用所选的服务器端语言（例如 PHP）进行验证。保存数据时，您不应接受此 Javascript 验证作为可靠的验证器。

【讨论】：