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

Question

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

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

正则表达式 1 检测它是否不是带有特定消息的数字
正则表达式 2 接受带有特定消息的小数点或逗号
特定消息的点或逗号后只有 2 个小数位

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

这是一个工作片段

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+(\.\d{0,2})?)|((\d*(\.\d{1,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>

Answer 1

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

请参阅以下代码段：

let decimalMessage = "";

jQuery.validator.addMethod("decimal", function(value, element) {
  let decimal = /[^0-9.,]/g.test(value);
  let decimalWithTwoDecimalNumber = /^\d+([.,]\d{2})?$/.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>

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

Set regex for only 2 decimal numbers + dot + comma with jquery validator plugin

javascript

regex

jquery

jquery-validate