資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中驗證八進位制數？
存在各種型別的數字表示方式，例如十進位制、十六進位制、二進位制、八進位制等。八進位制數是以 8 為基數的數值，它只接受 0 到 7 之間的數字。
在這裡，我們將學習如何驗證八進位制數。我們需要檢查八進位制數字符串的所有字元是否都是數字，並且在 0 到 7 之間。
使用正則表示式在 ReactJS 中驗證八進位制數
驗證八進位制數的最佳方法是使用正則表示式。我們可以使用正則表示式的 test() 方法來確保數字字串是一個有效的八進位制數。
語法
使用者可以按照以下語法使用正則表示式在 ReactJS 中驗證八進位制數。
let octalRegex = /^(0o)?[0-7]+$/i; let isValid = octalRegex.test(octal)
在上述語法中，我們將八進位制數作為 test() 方法的引數傳遞以進行驗證。
正則表示式解釋
^(0o)? − 八進位制數開頭可以包含 (0o)，表示該字串是一個八進位制數。
[0-7]+ − 八進位制數可以包含一個或多個 0 到 7 之間的數字。
$ − 表示字串的結尾。
i − 用於對“o”進行不區分大小寫的匹配。
示例
在下面的示例中，我們使用“number”型別的 HTML 輸入來獲取八進位制數的輸入。每當使用者輸入八進位制數的新值時，我們都會執行 handleNumberChange() 函式。
在 handleNumberChange() 函式中，我們使用了上述正則表示式和 test() 方法來驗證八進位制數。在輸出中，使用者可以輸入任何包含數字 8 或 9 的數字，並觀察輸出顯示八進位制數無效。
import React, { useState } from "react";
function App() {
let [number, setNumber] = useState("");
let [message, setMessage] = useState("");
function handleNumberChange(event) {
let currentNumber = event.target.value;
setNumber(currentNumber);
let octalRegex = /^(0o)?[0-7]+$/i;
if (octalRegex.test(currentNumber)) {
setMessage("is Valid Octal Number");
} else {
setMessage("is Invalid Octal Number");
}
}
return (
<div>
<h3>
{" "}
Using the <i> Regular expression </i> to validate octal number in ReactJS{" "}
</h3>
<input type = "number" value = {number} onChange = {handleNumberChange} />
<p>
{" "}
{number} {message}
</p>
</div>
);
}
export default App;
輸出
輸入有效的八進位制數時 -
輸入無效的八進位制數時 -
使用 validator NPM 包在 ReactJS 中驗證八進位制數
在這裡，我們將使用 validator 庫的 isOctal() 方法來驗證八進位制數。
語法
使用者可以按照以下語法使用 validator NPM 包的 isOctal() 方法來驗證八進位制數字符串。
validator.isOctal(num)
引數
num – 要驗證的八進位制數字符串。
示例
在下面的示例中，每當使用者更改八進位制數的值時，我們都會呼叫 handleNumberChange() 函式，該函式使用 isOctal() 方法來驗證八進位制數。該函式會根據八進位制數是否有效顯示有效或無效的訊息。
import React, { useState } from "react";
import validator from "validator";
function App() {
let [number, setNumber] = useState("");
let [message, setMessage] = useState("");
function handleNumberChange(event) {
let currentNumber = event.target.value;
setNumber(currentNumber);
if (validator.isOctal(currentNumber)) {
setMessage("is Valid Octal Number");
} else {
setMessage("is Invalid Octal Number");
}
}
return (
<div>
<h3>
{" "}
Using the <i> Validator NPM package </i> to validate octal numbers in ReactJS{" "}
</h3>
<input type = "text" value = {number} onChange = {handleNumberChange} />
<p>
{" "}
{number} {message}
</p>
</div>
);
}
export default App;
輸出
使用自定義演算法在 ReactJS 中驗證八進位制數
我們可以檢查數字的每一位，如果我們發現任何一位大於 7，我們可以說該數字不是有效的八進位制數。
語法
使用者可以按照以下語法使用自定義演算法驗證八進位制數。
for (let i = 0; i < currentNumber.length; i++) {
if (currentNumber[i] > 7) {
} else {
}
}
在上述語法中，我們使用了 for 迴圈來檢查每個數字位。在 for 迴圈中，我們使用了 if 語句來確保數字是一個有效的八進位制數。
示例
在下面的示例中，我們在 handleNumberChange() 函式中檢查是否有任何數字大於七。如果是，我們設定一個訊息，例如“不是有效的八進位制數”。否則，我們設定一個訊息，例如“是有效的八進位制數”。
import React, { useState } from "react";
function App() {
let [number, setNumber] = useState("");
let [message, setMessage] = useState("");
function handleNumberChange(event) {
let currentNumber = event.target.value;
setNumber(currentNumber);
// custom code to validate the octal number
for (let i = 0; i < currentNumber.length; i++) {
if (currentNumber[i] > 7) {
setMessage(" is not a valid octal number");
return;
} else {
setMessage(" is a valid octal number");
}
}
}
return (
<div>
<h3>
{" "}
Using the <i> custom algorithm </i> to validate octal number in ReactJS.{" "}
</h3>
<input type = "number" value = {number} onChange = {handleNumberChange} />
<p>
{" "}
{number} {message}
</p>
</div>
);
}
export default App;
輸出
在本教程中，使用者學習了使用各種方法驗證八進位制數。我們在第一種方法中使用了正則表示式，在第二種方法中使用了 validator NPM 包。此外，我們在第三種方法中建立了自定義演算法來驗證八進位制數。
481 次瀏覽
