[英]regex in javascript allow only numbers and one dot followed by max 2 number
使用javascript我想限制一個可信任的單元格,只允許數字和一個點,並在dot max 2數字后面
有效的例子:
在我的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>
只在純JavaScript中我試試這個:[0-9]?(。+)?[0-9] {1,2}但它不是okey而且我不知道如何實現我的功能
每當你的事件處理程序運行時,輸入增長一個字符,所以我認為更好的方法是檢查輸入是否仍然匹配你的正則規則,如果沒有,恢復以前的值並強制它模糊()。
嘗試像這樣更新你的事件處理程序,它應該工作:
let curValue = '';
function onlyNumberAndADot(event) {
const valid = /^\d*\.?(?:\d{1,2})?$/;
const text = event.target.textContent;
if (!valid.test(text)) {
event.target.textContent = curValue;
event.target.blur();
} else {
curValue = event.target.textContent;
}
}
document.getElementById("test1").addEventListener("input", function(event) {
onlyNumberAndADot(event);
});
document.getElementById("test1").addEventListener("blur", function(event) {
event.target.textContent = event.target.textContent.replace(/\.$/,'');
});
我創造了這個解決方案的小提琴 ,它的工作原理。
請注意,您必須暫時允許輸入“0”,否則用戶將無法輸入點,因此我對模糊事件進行了另一次驗證,以刪除最終的“。”
這應該涵蓋你的所有情況。
/^(?:\\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;
}
您可以使用帶有組的正則表達式作為虛線部分。
/^[1-9]*\d?(\.\d{1,2})?$/
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)));
.as-console-wrapper { max-height: 100% !important; top: 0; }
使用單詞邊界限制小數:
[0-9]?\.?[0-9]{1,2}\b
// here __^^
或更好:
\b\d+(?:\.\d\d?)?\b
您需要在多個if if語句中執行此操作,因為這是一個輸入標記,並且您可能會在用戶鍵入時立即更新。
首先:你需要測試/匹配它是否只是數字或者它是一個dot var digitsAndDot = /[0-9\\.]$/並對它做一些事情,或者你可以檢查它是否為nonDigit,除了dot / [^ 0 -9 \\。] $ /用它做點什么。
第二:如果字符串已經有一個點(。) /\\./而不是只允許類型號。
第三:找到你是否不希望這個“ 0.1.2。 ”出現var duplicate = /.\\d{0,2}$/然后做一些事情,例如繼續刪除數字的其余輸入(更多而不是兩個)並且不允許更多的點。
您還可以將值轉換為數組,然后對其進行操作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.