表单校验怎么在框内提示

表单校验通常会在用户输入数据后实时检查字段的有效性，并在不符合规则时提供反馈。在HTML5及现代前端框架中，这种提示通常是通过JavaScript来实现的。以下是常见的几种方式：

1. **HTML内置验证**：利用`<input type="email">`, `<input type="number">`等自带的type属性可以进行简单的格式验证，如邮箱、电话号码等。错误消息会显示在相应的输入框下方。

2. **JavaScript客户端验证**：在`onblur`或`onchange`事件触发时，编写JavaScript函数检查输入值是否符合特定条件，如果不符合，使用`setCustomValidity()`方法设置自定义错误信息，显示在`<input>`元素的` validity`属性上。

3. **jQuery插件**：像jQuery Validation plugin这样的工具可以方便地添加复杂的校验规则，并提供错误提示，允许定制提示内容和位置。

4. **React/Vue/Angular等框架**：这些框架提供了更高级的表单处理机制，例如在React中，可以使用`useState`和`useEffect`配合`addEventListener`来动态控制提示信息。

// React示例
<input
  onChange={(e) => { 
    if (!isValidEmail(e.target.value)) {
      e.target.setCustomValidity('请输入有效的邮箱地址');
    } else {
      e.target.setCustomValidity('');
    }
  }}
/>