在（React + Material-ui）中使用JSX文件中的正則表達式

Question

我想用RegEx做基於材料的表單驗證。我使用基於JS的正則表達式，但它不起作用。爲什麼？

下面是我的template.jsx文件的片段。我的表單只是formy material-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修復：

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

注意{0,1}限制量詞是一樣的?（ 1或0次發生）。 [...]字符類中不需要轉義點，它已經在那裏匹配一個字面點。