使用 jquery 验证器插件仅为 2 个十进制数字 + 点 + 逗号设置正则表达式

Posted 2023-05-09

【中文标题】使用 jquery 验证器插件仅为 2 个十进制数字 + 点 + 逗号设置正则表达式

【英文标题】：Set regex for only 2 decimal numbers + dot + comma with jquery validator plugin

【发布时间】：2021-04-26 07:23:52

【问题描述】：

我使用jQuery Validation Plugin 执行客户端表单验证。它运作良好。但是，我不知道确切的正则表达式，我无法实现我想要的。

我想添加 3 个不同的正则表达式，以便根据用户在输入字段中输入的内容显示 3 个不同的消息。：

Regex 1 检测它是否不是带有特定消息的数字 Regex 2 接受带有特定消息的小数点或逗号 点或逗号后只有 2 个十进制数字，带有特定消息

有很多相关的问题，但我尝试了很多关于 SO 的答案，但效果不佳。

这是一个有效的 sn-p

jQuery.validator.addMethod("decimal", function(value, element) 
  // Validating Decimal Numbers
  return this.optional(element) || /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)$/g.test(value);
, 'Please enter only numbers (format 0.00)');

jQuery.validator.addMethod("two_decimal", function(value, element) 
  // require 2 decimals
  return this.optional(element) || /^((\d+(\\.\d0,2)?)|((\d*(\.\d1,2))))$/.test(value);
, "Pleaser enter 2 numbers after dot");

// https://jqueryvalidation.org
$("#test_form").validate(

  submitHandler: function(form) 
    form.submit();
  ,
  // rules, options, etc.,
  onkeyup: function(element) 
    // "eager" validation
    this.element(element);
  ,
  rules: 
    decimal_number: 
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
      two_decimal: true
    
  ,
  messages: 
    montant_demande: 
      required: "Please enter a number",
    
  

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>

【问题讨论】：

^\d+(?:[.,]\d1,2)?$ 会做到的。

您是否希望始终使用带点/逗号和小数点 2 的 nmber，或者在键入 coma 或不带小数点的数字或点后带 2 的小数点时出现这种情况

@Spring 在输入没有小数点的 coma 或只有 2 个或更多小数点的数字时会出现这种情况。用户也可以输入一个整数。

我会将正则表达式组合成一个方法/规则，而不是试图让一个字段遵循两个不同的正则表达式规则。

@Sparky 如果将正则表达式组合成一个方法/规则，如何根据这些不同的情况显示不同的消息？

【参考方案1】：

如果您只想要数字，或带有逗号, 和点. 分隔符的小数点，只有两位小数，

参见下面的 sn-p ：

let decimalMessage = "";

jQuery.validator.addMethod("decimal", function(value, element) 
  let decimal = /[^0-9.,]/g.test(value);
  let decimalWithTwoDecimalNumber = /^\d+([.,]\d2)?$/.test(value);
  
    
  if(decimal) 
    decimalMessage = 'Please enter only numbers (format 0.00)'
    return this.optional(element);
  
  if(decimalWithTwoDecimalNumber )
    decimalMessage = 'Pleaser enter 2 numbers after dot'
  
  return this.optional(element)||decimalWithTwoDecimalNumber 
,function(params, element) 
    return decimalMessage
);



// https://jqueryvalidation.org
$("#test_form").validate(

  submitHandler: function(form) 
    form.submit();
  ,
  // rules, options, etc.,
  onkeyup: function(element) 
    // "eager" validation
    this.element(element);
  ,
  rules: 
    decimal_number: 
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
    
  ,
  messages: 
    montant_demande: 
      required: "Please enter a number",
    
  

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>

【讨论】：

几乎没问题。我看到点/逗号后有超过 2 个数字（例如：50.455）的情况，其中消息应该是“请在点后输入 2 个数字”

Okey 花了我太多时间，但我现在只使用一种带有动态消息的方法检查它:)