用最简单的方式实现前端校验，也许你并不需要任何框架

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <!-- 直接在input中加上required就行了 -->
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}
input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input
    type="text"
    id="choose"
    name="i-like"
    required
    minlength="6"
    maxlength="6" />
  <button>Submit</button>
</form>

<form>
  <label for="number">How many would you like?</label>
  <input type="number" id="number" name="amount" value="1" min="1" max="10" />
  <button>Submit</button>
</form>

<form novalidate class="more-api-form">
  <label for="mail">
    Please enter an email address:
  </label>
  <p>
    <input type="text" id="more-api-mail" name="mail" />
    <span class="error"></span>
  </p>
  <button>Submit</button>
</form>

input.invalid {
  border: 2px dashed red;
}
input.valid {
  border: 2px solid black;
}

// 获取form表单
const form = document.querySelector(".more-api-form");
// 获取邮箱输入框
const email = document.getElementById("more-api-mail");
// 获取错误提示框元素
const error = document.querySelector("#more-api-mail + span.error");
// 用于校验的正则表达式，跟上面一样这个表达式也是校验邮箱的
const emailRegExp =
      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

email.addEventListener("input", () => {
  // 跟据用户输入自动校验
  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
  if (isValid) {
    // 符合规范，就添加class到元素中
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  } else {
    // 不符合规范
    email.className = "invalid";
  }
});

// 这里我们要手动添加校验消息
form.addEventListener("submit", (event) => {
  event.preventDefault();

  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
  if (!isValid) {
    // 不合规就显示错误信息且阻止提交
    email.className = "invalid";
    error.textContent = "I expect an email, darling!";
    error.className = "error active";
  } else {
    // 合规就提交
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  }
});

// 获取form表单
const form = document.querySelector(".more-api-form");
// 获取邮箱输入框
const email = document.getElementById("more-api-mail");
// 获取错误提示框元素
const error = document.querySelector("#more-api-mail + span.error");
// 用于校验的正则表达式，跟上面一样这个表达式也是校验邮箱的
const emailRegExp =
      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// 函数组合
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

// 把所有所需要的校验都放这个函数里
function isValid(value) {
  const toObj = (v) => {v, valid:false, err:""};

  const notEmpty = (obj) => {
    // 不能为空
    if(obj.v.length === 0) {
      return {...obj, valid:false, err:"字符不能为空!"}
    };
    return {...obj, valid:true};
  }
  const tooShort = (obj) => {
    // 不能太短
    if(obj.v.length >= 8) return {...obj, valid:true};
    return {...obj, valid:false, err:"字符长度不能太短!"};
  }
  const isFormat = (obj) => {
    // 邮箱格式要正确
    if(emailRegExp.test(obj.v)) return {...obj, valid:true};
    return {...obj, valid:false, err:"邮箱格式不符!"};
  }

  // 我们可以在这里添加更多校验条件，例如字符不能太长等

  return  pipe(toObj, notEmpty, tooShort, isFormat)(value)
}

email.addEventListener("input", () => {
  // 跟据用户输入自动校验
  const obj = isValid(email.value)
  if (obj.valid) {
    // 符合规范，就添加class到元素中
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  } else {
    // 不符合规范
    email.className = "invalid";
  }
});

// 这里我们要手动添加校验消息
form.addEventListener("submit", (event) => {
  event.preventDefault();

  const obj = isValid(email.value)
  if (!obj.valid) {
    // 不合规就显示错误信息且阻止提交
    email.className = "invalid";
    error.textContent = obj.err
    error.className = "error active";
  } else {
    // 合规就提交
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  }
});

import { useState } from "react"
import * as R from "ramda"

export default function Validation() {
  const [value,setValue] = useState("")
  const [err,setErr] = useState("")

  const handleChange = (event) => {
    setValue(event.target.value)
    const obj = isValid(event.target.value)
    if(!obj.valid) {
      setErr(obj.err)
    }
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    const obj = isValid(value)
    if(obj.valid) {
      setValue("")
      // 提交数据
    } else {
      setErr(obj.err)
    }
  }

  // 把所有所需要的校验都放这个函数里
  function isValid(value) {
    const toObj = R.applySpec({v:R.identity, valid:false, err:""});

    const notEmpty = R.ifElse(
      R.prop("v"),
      R.mergetLeft({valid:true}),
      R.mergeLeft({valid:false, err:"字符不能为空!"})
    )

    const tooShort = R.ifElse(
      R.pipe(R.prop("v"), R.gt(R.__, 8)),
      R.mergeLeft({valid:true}),
      R.mergeLeft({valid:false, err:"字符长度不能太短!"});
    )

    const isFormat = R.ifElse({
      R.pipe(R.prop("v"), R.test(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)),
      R.mergeLeft({valid:true}),
      R.mergeLeft({valid:false, err:"邮箱格式不符!"})
    })

    return  R.pipe(toObj, notEmpty, tooShort, isFormat)(value)
  }

  return (
      <form onSubmit={handleSubmit}>
        <label for="mail">
          Please enter an email address:
        </label>
        <p>
          <input type="text" name="mail" value={value} onChange={handleChange} />
          <span className={`error ${!err&&"active"}`}>{err}</span>
        </p>
        <button>Submit</button>
      </form>
  )
}

import { useState } from "react"
import * as R from "ramda"

export default function Validation() {
  const [value,setValue] = useState("")
  const [err,setErr] = useState("")

  const handleChange = (event) => {
    setValue(event.target.value)
    // 这里取消了根据输入同步校验
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    isValid(value).then(({valid, err}) => {
      if(valid) {
        setValue("")
      } else {
        setErr(err)
      }
    })
  }

  function isValid(value) {
    const toObj = R.applySpec({v:R.identity, valid:false, err:""});

    const notEmpty = R.ifElse(
      R.prop("v"),
      R.mergetLeft({valid:true}),
      R.mergeLeft({valid:false, err:"字符不能为空!"})
    )

    const tooShort = R.ifElse(
      R.pipe(R.prop("v"), R.gt(R.__, 8)),
      R.mergeLeft({valid:true}),
      R.mergeLeft({valid:false, err:"字符长度不能太短!"});
    )

    const isFormat = R.ifElse({
      R.pipe(R.prop("v"), R.test(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)),
      R.mergeLeft({valid:true}),
      R.mergeLeft({valid:false, err:"邮箱格式不符!"})
    })

    const isExist = (obj) => {
      const exist = "banana";
      return new Promise((resolve, reject) => setTimeout(() => {
        if(obj.v === exist) {
          resolve({...obj, valid:false, err:"字符串已存在!"})
        }
        resolve({...obj, valid:true})
      }, 300))
    }

    return  R.pipeWith(
      (f, res) => R.andThen(f, Promise.resolve(res)),
      [toObj, notEmpty, tooShort, isFormat, isExist]
    )(value)
  }

  return (
      <form onSubmit={handleSubmit}>
        <label for="mail">
          Please enter an email address:
        </label>
        <p>
          <input type="text" name="mail" value={value} onChange={handleChange} />
          <span className={`error ${!err&&"active"}`}>{err}</span>
        </p>
        <button>Submit</button>
      </form>
  )
}