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

Question

我正在尝试使用 RegEx 进行 material-ui 基于表单的验证。我正在使用基于 JS 的正则表达式，但它不起作用。为什么？

下面是我的 template.jsx 文件中的片段。 my-form 只是 formsy 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>
   );
};

此代码总是给出 'Enter a valid Mobile' 错误消息。

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 次出现）。不需要转义 [...] 字符 class 内的点，它已经匹配那里的文字点。

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

Use Regular expression in JSX file in (React + Material-ui)

javascript

regex

formsy-material-ui