我想限制HTML输入字段中的用户输入。
这是一个接受十进制重量和单位(kg,lbs,g,t等)的字段。
以下几个有效的样本输入:
10.45 kg
125.5 kg
120.35 lbs
160 lbs
1200.16 g
24.6 t
我正在使用以下网址中提到的JQuery插件: http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input
但它不适用于复杂的模式。 任何人都可以帮助我使用正则表达式来实现结果吗?
找到以下完整代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/js/jquery/jquery-2.1.4.js" type="text/javascript"></script>
<script src="/js/jquery/jquery.filter_input.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//
$(document).ready(function(){
$('#input_2').filter_input({ regex: '\d+(?:.\d+)?\s(?:kg|lbs|t)' });
});
//-->
</script>
</head>
<body>
Weight: <input id="input_2" type="text" size="20" />
</body>
</html>
答案 0 :(得分:3)
如果使用HTML5是一个选项,那么你可以在输入中包含一个模式属性,例如使用Pranav C Balan的正则表达式:
<input type="text" name="weight" value="" pattern="^\d+(?:\.\d+)?\s*(?:kg|lbs|t)$" />
答案 1 :(得分:0)
在这种情况下,以下不是正确的答案。正如@stribizhev所评论的那样,您使用的插件不允许复杂的正则表达式验证。它会根据正则表达式检查您键入的每个字符,而不是整个字段进行验证。
不幸的是,这种验证似乎不适用于你的插件。
以下内容与您的所有示例相符:
^\d+(\.\d+)?\s(g|lbs?|kg|t)$
这分解如下:
^ # Matches start of string
\d+ # 1 or more digits
(\.\d+)? # Optionally followed by a decimal point and more digits
\s # Whitespace
(g|lbs?|kg|t) # Any of g, lb, lbs, kg, t
$ # Match end of string
示例here(regex101.com)。