如何使用 Parsley Validate 使用 jQuery Currency 格式验证输入字段？ （也许是正则表达式？）

Posted 2023-05-08

【中文标题】如何使用 Parsley Validate 使用 jQuery Currency 格式验证输入字段？ （也许是正则表达式？）

【英文标题】：How to validate input field with jQuery Currency formater using Parsley Validate? (Maybe RegEx?)

【发布时间】：2021-07-04 08:51:29

【问题描述】：

我有一个输入字段，它使用 javascript 将数字 enteret 转换为丹麦货币（20000 将显示为 20.000,00 kr。）.. 在此输入中，我需要验证（使用 Parsley Validate）以下内容：

输入的只是数字。 数字介于 10000 和 200000 之间。

我尝试使用 data-parsley-type="digits" data-parsley-length="[5,6]" 验证数字不低于 10000，但也会验证 999999，这会导致并不完美，但如果我无法将限制设置为 200000 那就没问题了。最大的问题是当我在输入框中输入时 Parsley 验证了输入，但是当我“走出”输入的 JavaScript 时将输入转换为货币格式被触发，现在输入字段有“。”和“kr”。所以 Parsley validate 返回输入错误。

如何让 Parsley 生效，即“10.000,00 kr”。但在“1k.000.00 kr.”上失败了？ ..也许是正则表达式？ .. 但是如何？

var currencyInput = document.querySelector('input[type="digits"]')
var currency = 'DKK' // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

 // format inital value
onBlur(target:currencyInput)

// bind event listeners
currencyInput.addEventListener('focus', onFocus)
currencyInput.addEventListener('blur', onBlur)


function localStringToNumber( s )
  return Number(String(s).replace(/[^0-9.-]+/g,""))


function onFocus(e)
  var value = e.target.value;
  e.target.value = value ? localStringToNumber(value) : ''


function onBlur(e)
  var value = e.target.value

  var options = 
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''




$(function () 
  $('#SendNewFixedEmployeeForm').parsley().on('field:validated', function() 
    var ok = $('.parsley-error').length === 0;
    $('.bs-callout-info').toggleClass('hidden', !ok);
    $('.bs-callout-warning').toggleClass('hidden', ok);
  )
  .on('form:submit', function() 
    return true;
  );
);

<link href="http://parsleyjs.org/src/parsley.css" rel="stylesheet"/>

<form id="SendForm" action="#" method="post" class="demo-form" data-parsley-validate="" data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
<input type='digits' class="maxLength form-control"  value="0" name="CurrencyField" id="CurrencyField" aria-describedby="basic-addon2" data-parsley-type="digits" data-parsley-length="[5,6]" data-parsley-errors-container="#Sallary-errors" required/>

<button type="submit" form="SendForm">Submit</button>

</form>

<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-4eb31870-42c1-91aa-5c3e-9c5b016d4ea4" crossorigin></script>

【参考方案1】：

使用data-parsley-min 和data-parsley-max 代替data-parsley-length

【讨论】：

谢谢你 Mark-André :-) .. 这解决了我在 10000 到 200000 之间的问题 .. 但我仍然遇到当 Currency 脚本格式化显示的输入时验证混乱的问题，因为“克朗。”和 ”。” ..知道我怎么能做到这一点吗？ :-)

没关系，我删除了 JavaScript 并将 som 文本作为前置和附加到输入字段，然后在该字段中只有数字，这适用于项目 ;-)