数据结构
网络
关系数据库管理系统 (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 次浏览
