ReactJSでテキスト入力に有効な電子メール形式があるかどうかを確認するにはどうすればよいですか？

Question

ReactJSでは、入力したテキスト（<TextField/>）が@のような電子メール形式であるかどうかを確認する正しい方法は何ですか？

私はアプリケーションをMongoDBに接続しているので、クライアント側またはサーバー側で電子メール形式のチェックを行うべきですか？

どのような例や指針をいただければ幸いです。

ありがとうございます！

Answer 1

あなたが送信ボタンを無効にするか、他のメール入力が正規表現形式に一致するまで、テキストの警告を追加することができますジャバスクリプト+正規表現の検証

を使用して行うことができます。

HTML：

<input type="text" name="email" id="email" placeholder="Email" onKeyPress="emailVerify(this.id)"> 

JAVASCRIPT：

function emailVerify(x){ 

var testEmail = /^[ ]*([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})[ ]*$/i; 
    jQuery('input').bind('input propertychange', function() { 
    if (testEmail.test(jQuery(this).val())) 
    { 
     // action to be performed if email is valid 

    } 
    else 
    { 
     // action to be performed if email is invalid - like disabling the submit button 
    } 
    }); 
} 

emailVerify()は、電子メールのテキストボックス内のすべて "キーを押して" 時のinvkoedされなければならない機能。

機能.bind() recrod全てのキーダウンイベントキーを押すたびすなわち、それはあなたの電子メールのテキストボックスの入力は正規表現（testEmailのcharecters）にマッチしたかどうかを確認します

形式の電子メール私は私@ .COは無効とみなされますメールme/@me.coに対し考慮されます

それはREACで、通常はなく、あなたのTextFieldコンポーネントが実装されている方法によって異なり

Answer 2

onChangeイベントを介してテキスト入力フィールド値を取得し、それをコンポーネント状態または他の場所（あなたのreduxストアなど）に配置します。 （すべてのキーを押すだけであなたは、本質的にあるため、再チェック）

<input 
    type="text" 
    value={this.state.email} 
    onChange={event => this.setState({email: event.target.value}) 
/> 

は今、あなたは単にあなたのonChangeハンドラで、電子メールの有効性を確認することができますが、それはあまりにも高価であるかもしれない：あなたのコードは次のようになります。

<input 
    type="text" 
    value={this.state.email} 
    onChange={event => this.setState({email: event.target.value}) 
    onBlur={() => this.setState({ 
     emailIsValid: isValidEmailAddress(this.state.email) 
    }) 
/> 

そして、あなたはCSSで、たとえば、コンポーネントの状態でemailIsValidブールの値に応じてユーザーにフィードバックを得ることができます別の解決策は、コンポーネントがフォーカスを失ったときにそのようなチェックを行うことであろうクラス。

EDIT：Salehen Rahmanはtype = "email"オプションについて有効な点を示しました。以下の段落はそれほど関連性がないかもしれません。

isValidEmailAddress実装の場合、正規表現は妥当な選択です。有効な電子メールを特定するために複雑な正規表現が多かれ少なかれ存在しますが、空ではない文字列、@、そして空でない別の文字列が良い近似です。だから、そのようなことを行うことができます：検証が​​両側に行うべきである

function isValidEmailAddress(address) { 
    return !! address.match(/.+@.+/); 
} 

Answer 3

フォーム：クライアント側とサーバ側にも、ここでは、フラックスアーキテクチャ

を使用して、リアクトでフォームの検証を実装する方法を理解することが良い exampleです

Answer 4

誰もがここでいくつかの有効なポイントを作っています。そして、これらのほとんどすべてをフォローしてデータを検証する必要があります。

とにかく、今のところ、これは電子メールの検証で進むより良い方法だと思います。

1. 設定<input type="email" />ブラウザはあなた
2. 検証のための電子メールを検証することができますので、それはjavascriptの
3. を使用してあなたが

   <input type="email" value={ this.state.email } onChange={ handleOnChange } /> 
   

   のような入力をレンダリングすることができ、サーバ

に検証を行い、 handleOnChange機能コードは次のようになります

let handleOnChange = (email) => { 

    // don't remember from where i copied this code, but this works. 
    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

    if (re.test(email)) { 
     // this is a valid email address 
     // call setState({email: email}) to update the email 
     // or update the data in redux store. 
    } 
    else { 
     // invalid email, maybe show an error to the user. 
    } 

} 

注：あなたがあなたの代わりにhandleOnChangeのthis.handleOnChangeを使用してもthis.handleOnChange = this.handleOnChange.bind(this);

ようconstructorでそれをバインドする必要がある場合がありますセットアップのすべてをした方法に応じて ...

としたときemail addressでサーバー/ APIに投稿要求を行い、サーバー上の電子メールを検証し、有効な場合はデータベースに格納します。それ以外の場合はエラーが返されます。

Googleノードの検証ライブラリを使用して、すべての検証を処理したり、ここからの電子メール検証コードを使用したり、必要に応じて検証することができます。