Клиентская проверка американской валюты

Question

У меня есть веб-приложение ASP.Net MVC 5, и мне нужно принять пользовательский ввод американской валюты.Некоторые допустимые входные данные могут быть:

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>

Я использовал этот совет этот совет , чтобы создать связующее, которое преобразует вводимые пользователем данные в десятичную, но проверка на стороне клиента не позволит пользователю ввести доллар.знак или запятые.Что мне нужно сделать, чтобы пользователь мог ввести действительные значения валюты, но предупреждает ее, если она вводит недопустимое значение?Я бы предпочел сделать как можно больше проверок на стороне клиента.

Answer 1

Возможно, вы захотите взглянуть на https://github.com/globalizejs/globalize#currency-module. Помогает выделить такие вещи. Что касается вашего вопроса, чтобы иметь возможность использовать символ доллара, вы не сможете сохранить это значение в виде десятичного формата в базе данных, только в виде строки.

Есть несколько вещей, которые вы можете сделать. Используйте начальную загрузку, чтобы поместить символ доллара перед вашим TextBox, используя input-group-addon. Не уверен, что он будет работать должным образом, так как я вижу, что вы установили 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>