一文详解如何处理前端表单验证确保用户输入合法

<form>
  <input type="text" name="username" required minlength="3" maxlength="20" pattern="[a-zA-Z0-9]+" title="只能包含字母和数字">
  <input type="email" name="email" required>
  <input type="password" name="password" required minlength="6">
  <button type="submit">提交</button>
</form>

<form id="myForm">
  <label for="username">用户名：</label>
  <input type="text" id="username" placeholder="3-20位字母或数字">
  <span id="usernameError" class="error"></span>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
  let username = document.getElementById("username").value;
  let errorSpan = document.getElementById("usernameError");
  let isValid = true;

  if (!/^[a-zA-Z0-9]{3,20}$/.test(username)) {
    errorSpan.innerText = "用户名格式不正确";
    isValid = false;
  } else {
    errorSpan.innerText = "";
  }

  if (!isValid) {
    event.preventDefault(); // 阻止提交
  }
});
</script>

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => {
  const formik = useFormik({
    initialValues: { username: '', email: '' },
    validationSchema: Yup.object({
      username: Yup.string()
        .matches(/^[a-zA-Z0-9]+$/, "只能包含字母和数字")
        .min(3, "至少3个字符")
        .max(20, "最多20个字符")
        .required("用户名必填"),
      email: Yup.string().email("无效邮箱").required("邮箱必填"),
    }),
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label>用户名</label>
        <input
          type="text"
          name="username"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.username}
        />
        {formik.touched.username && formik.errors.username ? (
          <div className="error">{formik.errors.username}</div>
        ) : null}
      </div>
      <div>
        <label>邮箱</label>
        <input
          type="email"
          name="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.touched.email && formik.errors.email ? (
          <div className="error">{formik.errors.email}</div>
        ) : null}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default SignupForm;

<form novalidate>
  <!-- 表单内容 -->
</form>