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+ 浏览量

开启你的 职业

完成课程获得认证

开始吧
广告