我使用 jQuery Validation Plugin 来执行客户端表单验证。它运作良好。但是,我不知道确切的 Regex,我无法实现我想要的。
我想添加 3 个不同的正则表达式,以便根据用户在输入字段中输入的内容显示 3 个不同的消息。:
有很多相关的问题,但我已经尝试了很多关于 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>
答案 0 :(得分: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>