Используйте регулярное выражение в файле JSX в (React + Material-ui)

Question

Я пытаюсь использовать RegEx для проверки материалов на основе форм. Я использую мой Regex на основе JS, но он не работает. Зачем?

Ниже приведен фрагмент моего файла 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 вхождений). Нет необходимости избегать точки внутри [...] класс символов, он уже соответствует буквальной точке там.