Question

我目前有一个输入type =“ text”，我在“ keyup”事件上将其转换为货币值。为了保持此功能（正常工作），必须将输入类型设置为“文本”。同时，我希望将最小值设置为“ 100.00”。我有什么办法可以做到这一点？另外，我是否可以自定义我的jquery验证消息，说“最低金额$ 100.00”？

$('input.number').keyup(function(event) {
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/([0-9])([0-9]{2})$/, '$1.$2')
      .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required id="balance" name="balance" type="text" class="number" />

Answer 1

您可以在输入字段minlength="5"

中添加此属性。

<input required id="balance" name="balance" type="text" class="number" minlength="5" />

并且在您的JS代码中，您可以添加'if'语句来检查此输入是否包含至少5个字符。

此外，您可以在后端添加相同的'if'语句以再次进行检查。

Answer 2

使用type="number"而不是type="text"上的input创建的代码段仍然可以使用jQuery功能。

验证消息是HTML5，而不是jQuery，因为您没有提供该代码。我做了以下事情：

已更改为type="number"
添加了min="100"
添加了step="0.01"以处理货币步进

$('input.number').keyup(function(event) {
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/([0-9])([0-9]{2})$/, '$1.$2')
      .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Text input (original): <input required id="balance" name="balance" class="number" type="text" /><br /> 
  Number input: <input required id="balance" name="balance" class="number" type="number" min="100" max="99999" step="0.01" /><br />
  <input type="submit" />
  <small>Enter less than 100 and press 'submit' to see validations.</small>
</form>

Answer 3

谢谢大家的投入。我最终将输入type =“ text”保留为用户可以输入的位数，并调用了一个函数以对照100来检查输入值。

function checkAmount() {  
var valueBalance = $("#balance").val();
var valueNumberBalance = parseFloat((valueBalance).replace(/[^\d\.]/, ''));

if (valueNumberBalance < 100) {     
    $("#balance").get(0).setCustomValidity("Minimum Amount of $100.00");
}
else {
    $("#balance").get(0).setCustomValidity("");
}

}

Answer 4

您可以尝试使用正则表达式进行货币验证

<div class="col-sm-3 form-group">
            <b>Premium :*</b><br>
            <p><input type="text" class="form-control" oninput="this.className = ''" name="premium" id="premium" valideAtt="currency" title="Premium" onblur="defaultValidation(this)"></p>
            <span id="er_premium" style="display: block; width:100%; float: left;"></span>
</div> 

<script type="text/javascript">
            var REG_CURRENCY = /(?=.*\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|0)?(\.\d{1,2})?$/;

            function defaultValidation(src){
                var getAttributeValue=src.attributes.valideAtt.value;

                if(getAttributeValue=="currency"){
                    if(!src.value.match(REG_CURRENCY)){
                        $("#"+src.id).addClass("invalid");
                        $("#er_"+src.id).html("<span style=\"color:red\">Please Enter Valide currency Value.<\span>");
                        return false;
                    }else{
                        $("#er_"+src.id).html("");  
                        return true;
                    }
                }           
            }
<script>

输入type =“ text”货币验证

4 个答案: