第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應(yīng),如何禁用按鈕?

如果用戶輸入的輸入不是使用 javascript 的有效電子郵件并做出反應(yīng),如何禁用按鈕?

暮色呼如 2022-12-22 15:02:36
我想將電子郵件驗(yàn)證添加到輸入字段,如果用戶輸入的電子郵件錯誤,則基于此禁用添加按鈕。下面你可以看到我的代碼,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   );}我想確保我對輸入有基本的電子郵件驗(yàn)證,并且只能輸入數(shù)字“”。有人可以幫我嗎?提前致謝。
查看完整描述

2 回答

?
江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個贊

有多種方法可以做到這一點(diǎn),但我建議在初始化為 true 的狀態(tài)下跟蹤按鈕的禁用狀態(tài)。


現(xiàn)在在每次更改電子郵件時運(yùn)行的useEffect中更改禁用狀態(tài),并根據(jù)您的驗(yàn)證將其設(shè)置為 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"

      />

      <button disabled={isDisabled}>Add</button>

    </>

  );

}


這是codesandbox中的工作原型


查看完整回答
反對 回復(fù) 2022-12-22
?
繁星淼淼

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超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>

      <input onChange={checkEmail} placeholder="email address" />

      <button disabled={isDisabled}>add</button>

    </div>

  );

}

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


查看完整回答
反對 回復(fù) 2022-12-22
  • 2 回答
  • 0 關(guān)注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號