（React + Material-ui）のJSXファイルで正規表現を使用

Question

マテリアルUIフォームベースの検証を行うためにRegExを使用しようとしています。 JSベースのRegexを使用していますが、動作しません。どうして ？

以下は、私のtemplate.jsxファイルのスニペットです。 my-formは、フォームマテリアルUIコンポーネントの単なるラッパーです。

import {myForm, TextField} from '@react-component/my-form'; 

export default (props) => { 
} = props; 
    const emailRegex = new RegExp('/\S+@\S+\.\S+/'); 
    const phoneRegEx = new RegExp('/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-/\s\.]{0,1}[0-9]{4}$/'); 
    return (
<myForm> 
    <TextField id="smsNumber" value={userInfo.smsNumber} name="smsNumberName" required requiredError="Mobile is a required field." validations={{matchRegexp:phoneRegEx}} validationErrors={{matchRegexp:'Enter a valid mobile.'}} onChange={changeSmsNumber} floatingLabelText={t('userProfile.mobile', "Mobile")} floatingLabelFixed={true} hintText={t('userProfile.mobile', "Mobile")}/> 
</myForm> 
    ); 
}; 

このコードでは、「有効なモバイルを入力してください」というエラーメッセージが常に表示されます。

Answer 1

あなたは正規表現リテラル表記を使用して電子メールの正規表現固定する必要があります。

const emailRegex = /^\S+@\S+\.\S+$/; 
        ^^   ^^ 

をそしてこれはphoneRegEx修正です：{0,1}制限数量詞が?と同じであることを

const phoneRegEx = /^[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-/\s.]?[0-9]{4}$/; 

は注意（ 0または0の出現）。文字クラス[...]の中にドットをエスケープする必要はありませんが、そこにはすでにリテラルドットがマッチしています。