element 表单验证不通过，滚动到验证提示的位置

**Element 表单验证不通过，滚动到验证提示的位置**

在开发中，我们经常会遇到表单验证的问题。虽然我们可以使用各种库或框架来实现表单验证，但是当表单验证不通过时，如何让用户快速找到错误信息是很重要的一点。

本文将介绍如何使用 JavaScript 和 CSS 实现 Element 表单验证不通过后滚动到验证提示的位置。

**HTML 结构**

首先，我们需要在 HTML 中定义一个表单和一个验证提示区域。

html<!-- 表单 -->
<form id="myForm">
 <label>用户名:</label>
 <input type="text" id="username" name="username">
 


 <button type="submit">提交</button>
</form>

<!-- 验证提示区域 -->
<div id="errorTips"></div>

javascript// 获取表单元素const form = document.getElementById('myForm');

// 获取验证提示区域元素const errorTips = document.getElementById('errorTips');

// 定义一个函数来处理表单提交事件function handleSubmit(event) {
 // 阻止默认行为 event.preventDefault();

 // 获取输入值 const username = document.getElementById('username').value;

 // 验证用户名是否合法 if (!/^[a-zA-Z0-9]{3,12}$/.test(username)) {
 // 显示验证提示信息 errorTips.innerHTML = '用户名必须是3到12位的字母或数字';
 // 滚动到验证提示区域 errorTips.scrollIntoView({ behavior: 'smooth' });
 } else {
 // 表单提交成功，处理其他逻辑 console.log('表单提交成功！');
 }
}

// 绑定表单提交事件form.addEventListener('submit', handleSubmit);

css#errorTips {
 background-color: #f0f0f0;
 padding:10px;
 border:1px solid #ccc;
}