在(React + Material-ui)中的JSX文件中使用正则表达式

Question

我正在尝试使用RegEx来进行基于材料ui表单的验证.我使用的是基于JS的Regex,但它不起作用.为什么？

以下是我的template.jsx文件的片段.my-form只是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次出现)相同.没有必要在[...]字符类中转义一个点,它已经匹配了一个文字点.