ReactJS 中的正則表示式

在本文中，我們將瞭解如何在 React 應用程式中處理含有正則表示式的字串。

正則表示式（或簡稱正則）是一系列字元，它們構成搜尋模式，用於檢查字串是否包含指定的搜尋模式。它還用於驗證字串，例如電子郵件、密碼等。

語法

new RegExp(pattern[, flags])

示例

在此示例中，我們將構建一個身份驗證 React 應用程式，該應用程式從使用者那裡獲取電子郵件和密碼，並檢查它們是否經過驗證。

我們有 Regex.js，其中包含用於驗證我們應用程式的電子郵件和密碼的所有正則表示式。

Regex.jsx

export const validEmail = new RegExp(
   '^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$'
);
export const validPassword = new RegExp('^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$');

App.jsx

import React, { useState } from 'react';
import { validEmail, validPassword } from './regex.js';

const App = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [emailErr, setEmailErr] = useState(false);
   const [pwdError, setPwdError] = useState(false);
   const validate = () => {
      if (!validEmail.test(email)) {
         setEmailErr(true);
      }
      if (!validPassword.test(password)) {
         setPwdError(true);
      }
   };
   return (
      <div>
         <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
         />
         <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
         />
         <div>
            <button onClick={validate}>Validate
         </div>
         {emailErr && <p>Your email is invalid</p>}
         {pwdError && <p>Your password is invalid</p>}
      </div>
   );
};
export default App;

在上面的示例中，當用戶單擊驗證按鈕時，它將檢查電子郵件和密碼的有效性並相應地顯示結果。

輸出

這將產生以下結果。

更新於： 2023 年 9 月 14 日

36K+ 瀏覽量

開啟你的 職業

完成課程獲得認證

開始吧
廣告