ReactJs 如何验证八进制数字

有各种类型的数字表示，如十进制、十六进制、二进制、八进制等。八进制数是一个以8为基数的数值，它只接受0到8之间的数字。

在这里，我们将学习如何验证八进制数。我们需要检查八进制数字字符串的所有字符都应该是数字，并且在1到8之间。

在ReactJS中使用正则表达式来验证八进制数字

验证八进制数字的最好方法是使用正则表达式。我们可以使用正则表达式的test()方法来确保数字字符串是一个有效的八进制数字。

语法

用户可以按照下面的语法，在ReactJS中使用正则表达式来验证八进制数字。

let octalRegex = /^(0o)?[0-7]+$/i;
let isValid = octalRegex.test(octal)

在上面的语法中，我们把八进制数字作为参数传给了test()方法来验证它。

正则表达式的解释

^(0o)? – 八进制数字的开头可能包含(0o)，代表该字符串是一个八进制数字。
[0-7]+ – 八进制数字可以包含0到7之间的一个或多个数字。
$ – 它代表字符串的结束。
i – 它用于对’o’进行不区分大小写的匹配。

例子

在下面的例子中，我们使用 “数字 “类型的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;

输出

当你输入一个有效的八进制数字时 –

如何在ReactJS中验证八进制数字？

当你输入一个无效的八进制数字时 –

如何在ReactJS中验证八进制数字？

在ReactJS中使用验证器NPM包来验证八进制数

在这里，我们将使用验证器库的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中验证八进制数字？

在ReactJS中使用自定义算法来验证八进制数字

我们可以检查数字的每个数字，如果发现任何数字大于7，我们就可以说这个数字不是有效的八进制数字。

语法

用户可以按照下面的语法使用自定义算法来验证八进制数。

for (let i = 0; i < currentNumber.length; i++) {
   if (currentNumber[i] > 7) {
      } else { 
   }
}

在上面的语法中，我们使用了for循环来检查每个数字。在for循环中，我们使用if语句来确保数字是一个有效的八进制数字。

例子

在下面的例子中，我们在handleNumberChange()函数中检查是否有数字大于7。如果是，我们就设置一个消息，如’不是有效的八进制数字’。否则，我们设置 “是一个有效的八进制数 “这样的信息。

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;