JavaScript表单校验：如何优雅地用图片提示文本框错误？

提升用户体验的javascript表单校验与图片错误提示

高效的前端表单校验是提升用户体验的关键。本文将详细讲解如何使用JavaScript实现优雅的文本框校验，并在错误时在输入框下方显示包含图片的错误提示信息，如同示例图片所示。

首先，我们需要在页面加载完成后立即执行校验函数，检查输入框是否为空，并显示相应的错误提示。这可以通过JavaScript的onload事件或其他页面加载完成后的回调函数实现。

其次，为了实时反馈，我们利用onBlur事件。当用户离开输入框时，触发校验函数。函数内，通过value属性获取输入框的值，并使用正则表达式或自定义规则进行校验。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

28

查看详情

校验失败时，我们需要动态创建HTML元素来显示错误提示。创建一个<div>元素，包含错误图片和文本信息，并将其插入到输入框之后。图片路径在JavaScript代码中指定。 以下示例代码展示了创建和插入错误提示元素：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">// 获取输入框元素 const input = document.getElementById('myInput'); // 校验函数 function validateInput() { const value = input.value; const errorDiv = document.getElementById('errorDiv'); // 假设 errorDiv 已存在 if (value === &quot;&quot;) { errorDiv.innerHTML = `@@##@@请输入内容`; // error.png 为你的错误图片路径 errorDiv.style.display = 'block'; } else { errorDiv.style.display = 'none'; } } // 绑定onBlur事件 input.addEventListener('blur', validateInput); // 初始化校验 validateInput();</pre>