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

Question

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

我想添加 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

如果你只想要数字，或者带 coma , dot 的小数. 只有两位小数的分隔符，

见下面的片段：

 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>