如何使用JQUERY在Keyup事件中运行正则表达式
[英]How to run regular expression in Keyup event with JQUERY
问题描述
I have this regular expression that validates up to 10 integers a decimal point and up to 10 decimals, how can I implement this regular expression in a textbox so that if the validation is not met I mark an error or stop the writing 
我有这个正则表达式，可以验证最多10个小数点和最多10个小数点的整数，如何在文本框中实现此正则表达式，以便如果不满足验证条件，我会标记错误或停止编写
$(document).ready(function() { $('#decimal').on('input', function(e) { if (/^(\\d{1,10})(.\\d{1,10})?$/i.test(this.value)) { alert("Ok"); } else { alert("x"); } }); });
<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p> <input type="text" name="value" id="decimal" /><br /> </p> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2018-10-08 20:53:35
I recommend adjusting your expression so that the dot is its own group. 我建议您调整表情，使点成为自己的组。
Otherwise, adding a dot will be invalid until the dot is followed by a digit. 否则，添加点将是无效的，直到点后跟数字为止。
$(document).ready(function() { $('#decimal').on('input', function(e) { var $this = $(this); if (/^(\\d{1,10})(\\.?)(\\d{1,10})?$/i.test(this.value)) { $this.removeClass('invalid'); } else { $this.addClass('invalid'); } }); });
.invalid { background-color: #FFCCCC; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="value" id="decimal">
If you are requiring the dot and following digit(s) before the input is considered valid, then remove the question marks, which make their proceeding tokens optional: 如果在输入被认为有效之前需要点和其后的数字，请除去问号，使问号成为可选标记：
$(document).ready(function() { $('#decimal').on('input', function(e) { var $this = $(this); if (/^\\d{1,10}\\.\\d{1,10}$/i.test(this.value)) { $this.removeClass('invalid'); } else { $this.addClass('invalid'); } }); });
.invalid { background-color: #FFCCCC; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="value" id="decimal">
Per your comment, you can prevent invalid characters from being typed. 根据您的评论，可以防止键入无效字符。
The problem is that the input event cannot be cancelled. 问题在于无法取消input事件 。
The keypress event can be cancelled, but fires before the last character is accepted. 可以取消keypress事件 ，但是会在接受最后一个字符之前触发。 So, you'll need to build the final test value string based on the current value plus the appended current character. 因此，您将需要根据当前值加上附加的当前字符来构建最终的测试值字符串。
The problem here is that you'll be able to enter more than 10 digits because the . 这里的问题是您可以输入10多个数字，因为. is optional. 是可选的。 So I've changed the regex to match 1-10 digits optionally followed by a dot OR a dot followed by 1-10 digits. 因此，我更改了正则表达式以匹配1-10位（可选）后跟一个点或一个点（后跟1-10位）。
The problem now is that if the user types 10 digits and then selects them all, expecting that the next digit entered will erase the previous 10, it will fail because the handler still sees the value as being 10 digits even though those digits will be replaced. 现在的问题是，如果用户键入10位数字，然后全部选中它们，并期望输入的下一位数字将擦除前10位数字，则它将失败，因为即使替换了这些数字，处理程序仍将值视为10位数字。
$(document).ready(function() { $('#decimal').on('keypress', function(e) { var pressed = String.fromCharCode(e.which); var final = this.value + pressed; if (!final.match(/^\\d{1,10}(\\.|\\.\\d{1,10})?$/i)) { e.preventDefault(); // or return false; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="value" id="decimal">
For more reference, see this answer by Ashad Shanto . 有关更多参考，请参见Ashad Shanto的 答案 。
解决方案2
1 2018-10-08 20:54:10
Your regex has a problem, when you enter a dot , then it doesn't match. 您的正则表达式有问题，当您输入dot ，则表示不匹配。
I suggest you change the regex to the following: 我建议您将正则表达式更改为以下内容：
^\d{1,10}\.?\d{0,10}$
Now it will match when you enter numbers with or without dot. 现在，当您输入带或不带点的数字时，它将匹配。
Note that I have escaped the dot . 请注意，我已经避开了点 。 Otherwise it Means ' Any character ', not just a dot. 否则，它的意思是“ Any character ”，而不仅仅是点。
I have also changed to allow 0-10 digits after the dot, otherwise it's impossible to enter the dot . 我也已更改为允许在点后添加0-10 digits ，否则无法输入dot 。
EDit : EDit ：
if you want to accept number with up to 20 digits without a dot, use this: 如果您要接受最多20位不带点的数字，请使用以下命令：
^\d{1,10}\.?\d{0,10}$|^\d{1,20}$
It uses the OR operator ' | 它使用OR运算符' | ' to give an alternative regex which will match 1 to 20 digits without a dot. '给出一个替代的正则表达式，它将匹配1到20个数字且不带点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.