首頁猿問如果用戶輸入的輸入不是使用...

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應，如何禁用按鈕？

JavaScript

暮色呼如 2022-12-22 15:02:36

我想將電子郵件驗證添加到輸入字段，如果用戶輸入的電子郵件錯誤，則基于此禁用添加按鈕。下面你可以看到我的代碼，function Parent() { const [email, setEmail] = useState(''); const onEmailChange = (event: any) => { setEmail(event.target.value); }; const isDisabled = email.length === 0; return ( <Input type="email" value={email} onChange={onEmailChange} placeholder="Insert user email" /> <button disabled={isdisabled}>Add</button> //add button to be disabled when user input email is wrong );}我想確保我對輸入有基本的電子郵件驗證，并且只能輸入數字“”。有人可以幫我嗎？提前致謝。

查看完整描述

2 回答

江戶川亂折騰

TA貢獻1851條經驗獲得超5個贊

有多種方法可以做到這一點，但我建議在初始化為 true 的狀態下跟蹤按鈕的禁用狀態。

現在在每次更改電子郵件時運行的useEffect中更改禁用狀態，并根據您的驗證將其設置為 true 或 false。

import React from "react";

// Modify this function as per your needs

const validateEmail = email => typeof email === "string" && email.includes("@");

export default function App() {

const [email, setEmail] = React.useState("");

const [isDisabled, setIsDisabled] = React.useState(true);

const onEmailChange = event => {

setEmail(event.target.value);

};

React.useEffect(() => {

setIsDisabled(!validateEmail(email));

}, [email]);

return (

<input

type="text"

value={email}

onChange={onEmailChange}

placeholder="Insert user email"

</>

);

}

這是codesandbox中的工作原型

反對回復 2022-12-22

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

您可以使用regexorder 通過onChange()屬性檢查輸入值是否為電子郵件。

import React from "react";

const regex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

export default function App() {

const [isDisabled, setDisibility] = React.useState(true);

const checkEmail = e => {

setDisibility(!regex.test(e.target.value));

}

return (

<div>

</div>

);

}

https://codesandbox.io/s/dry-sun-votmt?fontsize=14&hidenavigation=1&theme=dark

反對回復 2022-12-22

2 回答
0 關注
108 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應，如何禁用按鈕？

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應，如何禁用按鈕？

2 回答

添加回答

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應，如何禁用按鈕？