javascript中的正则表达式仅允许数字和一个点后跟最多2个数字

时间:2018-05-26 18:39:39

标签: javascript html regex regex-negation

使用javascript我想限制一个可信任的单元格,只允许数字和一个点以及最大点数2之后

有效的例子:

  • 2
  • 0.2
  • 0.35
  • 0.5
  • 0.22
  • 4.55
  • 6.4
  • 6546545.55

在我的exaple中



function onlyNumberAndADot(element) {
  const invalidChars = /\D/g;
  ob = element.target;
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
}

document.getElementById("test1").addEventListener("input", function(event) {
  onlyNumberAndADot(event);
})

#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

仅限纯粹的javascript 我正在尝试这个:[0-9]?(。+)?[0-9] {1,2}但它不是okey而且我不知道如何实现我的功能

not a correct example... because of number 6546545.55

5 个答案:

答案 0 :(得分:3)

每当你的事件处理程序运行时,输入增长一个字符,所以我认为更好的方法是检查输入是否仍然匹配你的正则规则,如果没有,恢复前一个值并强制它模糊()

尝试像这样更新你的事件处理程序,它应该工作:

var choice = await DisplayAlert("Title", "Delete This?", "YES", "NO");
if (choice) //yes was clicked
{
    //do something
}

我使用此解决方案创建了一个fiddle,它可以正常运行。

请注意,您必须暂时允许输入&#39; 0。&#39;否则用户将无法输入点数,因此我对模糊事件进行了另一次验证,以删除最终&#39;。&#39;

答案 1 :(得分:3)

这应该涵盖您的所有情况。

/^(?:\d+(?:\.\d{1,2})?|\.\d{1,2})$/

可读版本

 ^ 
 (?:
      \d+ 
      (?: \. \d{1,2} )?
   |  \. \d{1,2} 
 )
 $
聊天后

更新

似乎正则表达式需要在实时事件处理程序中对输入进行操作,
像按键粘贴等。

要做到这一点,它需要是一个渐进的可选类型的正则表达式 允许部分匹配,但剥离无效文本。

那个正则表达式是 查找/^(\d+(?:\.\d{0,2})?|\.\d{0,2})?.*?$/
替换"$1"

可读版本

 ^ 
 (                             # (1 start)
      \d+ 
      (?:
           \. 
           \d{0,2} 
      )?
   |  \. \d{0,2} 
 )?                            # (1 end)
 .*? 
 $

提交当前条目时,最终验证正则表达式可以是 是必要的,但也许不是。

正则表达式是这样的^(?:\d+(?:\.\d{0,2})?|\.\d{1,2})$

唯一可能的失效只会是一个点或一个空白 这是一个有效的当前输入但在决赛中无效。

如果它不匹配,只需将输入设置为0并从那里开始。

更新

要限制重写每个事件的输入文本,请添加一对 处理程序中的额外过滤器步骤

var RxFinalForm = /^(?:\d+(?:\.\d{0,2})?|\.\d{1,2})$/;
var RxRmvInvalid = /[^\d.]+/g;
var RxPartialForm = /^(\d+(?:\.\d{0,2})?|\.\d{0,2})?.*?$/;

function onlyNumber(element) { 
 ob = element.target; 
 var sContent = ob.textContent;

 // Test if the current content is a valid Final Form.
 // Note the ob.textContent does not need to be changed,
 // thus preserving the caret position.
 // -----------------------------------------------------
 if ( RxFinalForm.test( sContent ) )
    return;  // No need to change anything, just return

 // Remove any invalid characters ( non - dot/digit )
 // --------------------------------------------------
 sContent = sContent.replace( RxRmvInvalid, "" );

 // Extract the Partial Form
 // -------------------------
 sContent = sContent.replace( RxPartialForm, "$1");

 // Finally, if 'ob.textContent' does not equal 'sContent', change it.
 // This will happens when an extra dot was enterred.
 // ------------------------------------------------------------------
 if ( ob.textContent !== sContent )
    ob.textContent = sContent;
} 

答案 2 :(得分:1)

您可以使用带有组的正则表达式作为虚线部分。

/^[1-9]*\d?(\.\d{1,2})?$/

&#13;
&#13;
console.log(['2', '0.2', '0.35', '.5', '.22', '4.55', '6.4', '6546545.55', '-1', '0.', '00', '00.0', '.123'].map(s => /^[1-9]*\d?(\.\d{1,2})?$/.test(s)));
&#13;
.as-console-wrapper { max-height: 100% !important; top: 0; }
&#13;
&#13;
&#13;

答案 3 :(得分:0)

使用单词边界限制小数:

[0-9]?\.?[0-9]{1,2}\b
//          here __^^

或更好:

\b\d+(?:\.\d\d?)?\b

答案 4 :(得分:0)

您需要在多个if else语句中执行此操作,因为这是一个输入标记,您可能会在用户键入时立即更新。

首先:你需要测试/匹配它是否只是数字,或者它是一个点 var digitsAndDot = / [0-9 \。] $ / 并做一些事情关于它,或者您可以检查它是否为nonDigit,除了点 / [^ 0-9 \。] $ / 对它做了一些事情。

第二:如果字符串已经有一个点(。) /\ ./ 而不是只允许类型编号。

第三:找出你是否想要这个&#34; 0.1.2。&#34;出现 var duplicate = /。\ d {0,2} $ / ,然后做一些事情,例如继续删除数字的输入的其余部分(超过两个)并且不要允许更多点。

您也可以将值转换为数组,然后对其进行操作。