我将material-ui-phone-number
用于表单的输入字段。我想使用Yup验证电话号码。无论我在该字段中键入什么,它都表明没有输入电话号码。我正在检查应该传递给Yup的字符串的有效性。从文档中可以看出,material-ui-phone-number
是Textfield
的扩展,因此应该与Yup一起使用。
//Yup
const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/
const validationSchema = Yup.object().shape({
contactFirstName: Yup.string()
.min(1, "Must have a character")
.max(255, "Must be shorter than 255")
.required("Must enter a first name"),
contactLastName: Yup.string()
.min(1, "Must have a character")
.max(255, "Must be shorter than 255")
.required("Must enter a last name")
contactPhoneNumber: Yup.string()
.matches(phoneRegExp, "Phone number is not valid")
.required("Must enter a phone number")
})
export default validationSchema
//ContactInformation.js
<div className="contactPhoneNumber">
<MuiPhoneNumber
id="contactPhoneNumber"
label="Phone Number"
defaultCountry={"us"}
variant="filled"
onChange={handleChange}
onBlur={handleBlur}
value={values.contactPhoneNumber}
className={touched.contactPhoneNumber && errors.contactPhoneNumber ? "has-error" : null}
/>
<Error touched={touched.contactPhoneNumber} message={errors.contactPhoneNumber}/>
//EventForm.js
export default function EventForm(){
return (
<Formik
initialValues={{eventName: "", email: "", }}
validationSchema={validationSchema}
onSubmit={(values, {setSubmitting, resetForm}) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{ ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit}>
<EventDetails values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} />
<Divider />
<ContactInformation values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} />
<div className="submitButton">
<Button variant="outlined" type="submit" disabled={isSubmitting} >
Submit
</Button>
</div>
</form>
)}
</Formik>
)
}
答案 0 :(得分:1)
您需要使用handleChange行进行更改。
您需要在handleChange中传递密钥。
<div className="contactPhoneNumber">
<MuiPhoneNumber
id="contactPhoneNumber"
label="Phone Number"
defaultCountry={"us"}
variant="filled"
onChange={handleChange('contactPhoneNumber')}
onBlur={handleBlur}
value={values.contactPhoneNumber}
className={touched.contactPhoneNumber && errors.contactPhoneNumber ? "has-error" : null}
/>
<Error touched={touched.contactPhoneNumber} message={errors.contactPhoneNumber}/>
答案 1 :(得分:-1)
已声明validationSchema = {validationSchema}
首先为Yup创建一个对象。在其中声明您的验证。
const validationSchema = Yup.object({
contactPhoneNumber: Yup.string()
.matches(phoneRegExp, "Phone number is not valid")
.required("Must enter a phone number")
})