Javascript 如何仅在触摸字段时显示错误？|反应&&；福米克

我有一张用React和Formik制作的表格。除了一个边缘的情况外，一切正常。我需要为电子邮件输入隐藏错误消息

（关于错误的电子邮件地址）

，如果未按要求触摸它

问题： 用户认为需要发送电子邮件，即使这是一个完全无关的错误

我已经尝试在条件渲染中将字段设置为touch，因此，只有在触摸字段时才会出现错误。如下图所示：

const emailValidation = (value, field) => {
  let emailErrorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) && field.email.touched) {
    emailErrorMessage = 'Invalid email address';
  }
  return emailErrorMessage;
};

那不行。我在代码的JSX部分也设置了它<代码>见下文：

const createUserValidationSchema = Yup.object().shape({
  username: Yup.string('Provide a Username').required('Username is Required'),
  email: Yup.string('Provide an email'),
  password: Yup.string('Enter your password').required('Password is Required'),
  confirmPassword: Yup.string('Enter your password again')
    .required('Password Confirmation is Required')
    .oneOf([Yup.ref('password')], 'Passwords do not match')
});

const emailValidation = (value, field) => {
  let emailErrorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) && field.email.touched) {
    emailErrorMessage = 'Invalid email address';
  }
  return emailErrorMessage;
};

class userValidation extends Component {
  static propTypes = {
    ...formPropTypes,
    username: PropTypes.string,
    email: PropTypes.string,
    password: PropTypes.string,
    confirmPassword: PropTypes.string,
    groupSelect: PropTypes.func
  };

  static defaultProps = {
    email: ''
  };

  state = {
    type: 'password',
  };

 render() {
    const { type } = this.state;
    return (
      <div className="col-8">
        <h3>Create User</h3>
        <Formik
          initialValues={{
            username: '',
            email: '',
            password: '',
            confirmPassword: ''
          }}
          validationSchema={createUserValidationSchema}
          onSubmit={values => {
            // same shape as initial values
            console.log(values);
          }}
        >
          {({ errors, touched }) => (
            <Form>
              <div className="my-3">
                <label>
                  Username <span className="text-danger">*</span>
                </label>
                <Field name="username" type="text" className="form-control rounded-0" />
                {errors.username && touched.username ? (
                  <div className="text-danger">{errors.username}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>email</label>
                <Field
                  name="email"
                  validate={emailValidation}
                  type="email"
                  className="form-control rounded-0"
                />
                {errors.email && touched.email ? (
                  <div className="text-danger">{errors.email}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>
                  Password <span className="text-danger">*</span>
                </label>
                <div className="d-flex align-items-center">
                  <Field type={type} name="password" className="form-control rounded-0 mr-2" />
                  <span
                    className={type === 'password' ? 'fa fa-eye fa-lg' : 'fa fa-eye-slash fa-lg'}
                    onClick={this.togglePasswordMask}
                  />
                </div>
                {errors.password && touched.password ? (
                  <div className="text-danger">{errors.password}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>
                  Confirm Password <span className="text-danger">*</span>
                </label>
                <Field name="confirmPassword" type={type} className="form-control rounded-0" />
                {errors.confirmPassword && touched.confirmPassword ? (
                  <div className="text-danger">{errors.confirmPassword}</div>
                ) : null}
              </div>
              <button type="submit" className="btn btn-primary rounded-0 float-right my-3">
                Create User
              </button>
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default userValidation;

const createUserValidationSchema=Yup.object（）.shape({
用户名：Yup.string（'提供用户名'）.required（'需要用户名'），
email:Yup.string（'provideanemail'），
密码：Yup.string（'Enter your password'）。必需（'password is required'），
confirmPassword:Yup.string（'再次输入密码'）
.required（'需要密码确认'）
.oneOf（[Yup.ref（'password'），'Passwords not match'）
});
常量emailValidation=（值，字段）=>{
让电子邮件发送错误消息；
如果（！/^[A-Z0-9.\%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test（value）和field.email.touch）{
emailErrorMessage='无效的电子邮件地址'；
}
返回emailErrorMessage；
};
类userValidation扩展了组件{
静态类型={
…形式类型，
用户名：PropTypes.string，
电子邮件：PropTypes.string，
密码：PropTypes.string，
confirmPassword:PropTypes.string，
groupSelect:PropTypes.func
};
静态defaultProps={
电子邮件：“”
};
状态={
键入：“密码”，
};
render（）{
const{type}=this.state；
返回(
创建用户
{
//形状与初始值相同
console.log（值）；
}}
>
{（{错误，触摸}）=>(
用户名*
{errors.username&&touch.username(
{errors.username}
)：null}
电子邮件
{errors.email&&touch.email(
{errors.email}
)：null}
密码*
{errors.password&&toucted.password(
{错误.密码}
)：null}
确认密码*
{errors.confirmPassword&&touch.confirmPassword(
{错误。确认密码}
)：null}
创建用户
)}
);
}
}
导出默认用户验证；

预期结果： 触摸字段后，仅显示无效电子邮件地址。如果我尝试提交，但没有提供电子邮件地址，则不会出现错误

当前结果：

---

出现错误，不允许我提交。

您只能使用yup进行提交。您不需要额外的自定义验证

const createUserValidationSchema = Yup.object().shape({
  email: Yup.string().email('Provide an email'),
  ....
});

是的，在填写电子邮件时对其进行验证，并允许提交带有空电子邮件字段的表单