在Reactjs表单上验证电话号码

Question

我正在开发一个前端应用程序，必须向表单添加验证。我是ReactJS的新手，在我的开发之路上学习。

phoneNumber有一个输入字段，它只需要是数字。所以在输入框下面应该有一个红色的警告文本，上面写着&;Only numbers!&;如果有人输入字母。我为onChange写了一个handleChange。但这似乎不起作用。web浏览器上的控制台抛出这个错误:originalOnChangeEvent不是一个函数。

updateCustomerInfoValues正在使用useReducer钩子。纠结于调用onChange的钩子和函数。

CustomerFields.jsx

import React, { } from 'react';
const CustomerFields = (props) => {
const {
customerInfo,
updateCustomerInfoValues
}= props;
const errors={
firstName: '',
phoneNumber: '',
userEmail: '',
}
function handleChange(event){
updateCustomerInfoValues
event.preventDefault();
const { name, value } = event.target;
let errors = state.errors;
if (!customerInfo.phoneNumber.match(/^[0-9b]+$/)) {
errors.customerInfo  = 'Only numbers';
}
setState({errors, errors})
}
return (
<div className="caption font-large">Customer Data</div>
<div className="customer-input-field">
<InputField
inputType="text"
fieldName="firstName"
label="FirstName"
htmlAttributes={{
onChange: updateCustomerInfoValues,
value: customerInfo.firstName
}}
/>
<InputField
inputType="text"
fieldName="phoneNumber"
label="Phone Number"
htmlAttributes={{
onChange: {handleChange},
value: customerInfo.phoneNumber
}}
/>
</div>
);
};

MainForm.jsx

import React, { useMemo, useState, useEffect, useCallback, useReducer } from 'react';
import CustomerFields from './CustomerFields';
const MainForm = (props) => {
const [customerInfo, updateCustomerInfo] = useReducer(formUpdateFieldValues, result.customerInfo);
return (
<Form>
<div id="post-customer">
<div id="post-customer-content">
<CustomerFields
customerInfo={customerInfo}
updateCustomerInfoValues={updateCustomerInfo}
/>
</div>
</Form>
};

Answer 1

在您的情况下，我建议使用Formik和yup库。Formik将帮助你组织你的表单，它也支持yup。
是的，这会帮助你验证。它有很多不同的验证模板，并支持正则表达式。
如果你的一个输入字段是不正确的，它将实时发送一个错误消息(不是在控制台，而是作为你的函数的属性，它将返回你的表单)，你可以在你的输入组件中处理。
Formik - https://formik.org/docs/overview
是的- https://www.npmjs.com/package/yup
错误处理- https://formik.org/docs/guides/validation
你也可以找到或编写自己的电话号码reg exp.