Question

我有一个ASP.Net MVC 5 Web应用程序，我需要接受用户输入的美元货币。一些有效的输入可能是：

100
$100.21
$ 1,234
$1,234.56

无效的输入可能是：

10,12
1o0.21

我的（简化的）模型如下：

public class Claim {
  [DisplayName("$ Amount)]
  [DataType(DataType.Currency)]
  [Required]
  [Range(0.0, 200000.0)]
  public decimal? DollarAmount { get; set; }
}

我的cshtml标记如下：

  @Html.LabelFor(model => model.DollarAmount, htmlAttributes: new { @class = "control-label col-md-3" })
  <div class="col-md-9">
    @Html.EditorFor(model => model.DollarAmount, new { htmlAttributes = new { @class = "form-control margin-bottom" } })
    @Html.ValidationMessageFor(model => model.DollarAmount, "", new { @class = "text-danger" })
  </div>

我使用了此建议this advice来构建一个活页夹，该活页夹将用户输入转换为十进制，但是客户端验证不会让用户输入美元符号或逗号。我需要怎么做才能允许用户输入有效的货币值，但是如果用户输入的无效值时向她发出警告？我希望在客户端上进行尽可能多的验证。

Answer 1

您可能想看看https://github.com/globalizejs/globalize#currency-module。帮助分配这种东西。至于您要使用美元符号的问题，您将不能以十进制格式将此值存储在数据库中，而只能以字符串形式存储。

您可以执行以下操作：使用引导程序，使用input-group-addon在美元的TextBox前面放置一个Dollar符号。不知道它是否能正常工作，因为我看到您在文本框上设置了Margin-bottom，告诉我您可能没有在上面使用引导表单标签。

您可能想研究AutoNumeric jQuery插件，它维护良好，并且基本上已经“想通了所有我想用的通货”。

// View

@Html.LabelFor(model => model.DollarAmount, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-9 input-group">
        <span class="input-group-addon">$</span>
        @Html.EditorFor(model => model.DollarAmount, new { htmlAttributes = new { @class = "form-control margin-bottom" } })
        @Html.ValidationMessageFor(model => model.DollarAmount, "", new { @class = "text-danger" })
    </div>


// Class

public class Claim {
  [DisplayName("$ Amount)]
  [DataType(DataType.Currency)]
   // {0:C} Will show as currency {0:N} to show Numbers
  [DisplayFormat(DataFormatString = "{0:C}", ApplyFormatInEditMode = true))] 
  [Required]
  [Range(0.0, 200000.0)]
  public decimal? DollarAmount { get; set; }
}

另一种选择是使用javascript来隐藏字段，该字段会将字段从字符串复制为小数，并且可以是您提交的字段，如下所示。

// MODEL
public class Claim {
  [DisplayName("$ Amount)]
  [DataType(DataType.Currency)]
  [Required]
  [Range(0.0, 200000.0)]
  public decimal? DollarAmount { get; set; }
}


// View

@Html.HiddenFor(model => model.DollarAmount, new { @id = "DollarAmount" })

@Html.LabelFor(model => model.DollarAmount, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-9 input-group">
        <span class="input-group-addon">$</span>
        <input id="DollarSave" type="text" name="DollarSave" pattern="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$" title="You must enter in proper currency">
        @Html.ValidationMessageFor(model => model.DollarAmount, "", new { @class = "text-danger" })
    </div>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('#DollarSave').change(function(){ 
  var sourceField = $("#DollarSave").val(); //source field key
  $("#DollarAmount").val(sourceField); //destination field key
  $("#DollarAmount").change(); //destination field key
  });
});
</script>

Answer 2

Pool pro的答案对解决我的问题有很大帮助，但是我无法获得他的输入标签模式来显示消息。它可以在JSFiddles中工作，但不能在我的Asp.Net视图模板中工作。因此，我在javascript中进行了模式验证和消息更新。我还使用了其他正则表达式。为了完整起见，我在这里发布我的解决方案：

@Html.HiddenFor(model => model.DollarAmount, new { @id = "DollarAmount" })

@Html.LabelFor(model => model.DollarAmount, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9>
    <input id="DollarSave" type="text" name="DollarSave" class="form-control text-box single-line">
    <p id="BadDollarSave" class="text-danger"></p>
</div>

<script type="text/javascript">
jQuery(document).ready(function($){

    $('#DollarSave').on('blur', function () {
        validateDollarSave();
    });

    function validateMoney(inputId) { 
        var errorMsg = '';
        var currency = $('#DollarSave').val();
        var good = currency.match(/^(\$|\$ )?[0-9]{1,3}(?:(,[0-9]{3})*|([0-9]{3})*)(?:(\.|\.[0-9]{2}))?$/);
        if (!good) {
            errorMsg = "$ Amount must be US currency";
        } else {
            var num = currency.replace(/[, $]/g, "");
            $('#DollarAmount').val(num);
        }
        document.getElementById('BadDollarSave').innerHTML = errorMsg;
    };
});
</script>

客户端对美元的验证

2 个答案: