在网页开发中，文本框校验以及带图标错误信息显示是提升用户体验的重要环节。通过JavaScript，我们可以轻松实现这一功能。

文本框校验是确保用户输入符合特定规则的关键步骤。比如，我们可能需要限制用户输入的内容为合法的邮箱格式、手机号码格式，或者确保输入的长度在一定范围内。以邮箱校验为例，我们可以使用正则表达式来判断用户输入是否符合邮箱的基本格式。代码如下：

function validateEmail(email) {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}

当用户在文本框中输入内容并失去焦点时，我们可以调用这个函数进行校验。

接下来，就是如何显示带图标的错误信息。为了实现这一点，我们需要在HTML中为每个需要校验的文本框附近预留一个用于显示错误信息的元素，比如一个<span>标签。然后，通过JavaScript动态地修改这个元素的内容和样式。

假设我们有一个邮箱输入框和一个用于显示错误信息的<span>标签：

<input type="text" id="emailInput" onblur="validateAndShowError()">
<span id="emailError" style="color: red; display: none;"></span>

在JavaScript中，我们可以这样实现校验和错误信息显示：

function validateAndShowError() {
    const emailInput = document.getElementById('emailInput');
    const emailError = document.getElementById('emailError');
    const emailValue = emailInput.value;

    if (!validateEmail(emailValue)) {
        emailError.textContent = '请输入有效的邮箱地址';
        emailError.style.display = 'block';
        // 为错误信息添加图标，可以通过CSS背景图片等方式实现
        emailError.style.backgroundImage = 'url(error-icon.png)';
        emailError.style.paddingLeft = '20px';
    } else {
        emailError.textContent = '';
        emailError.style.display = 'none';
    }
}

通过上述代码，当用户输入的邮箱格式不正确时，会显示带图标的错误信息，提示用户输入正确的内容。而当输入正确时，错误信息会隐藏。

通过合理运用JavaScript进行文本框校验，并巧妙地结合HTML和CSS实现带图标错误信息的显示，能够让用户在输入时及时得到反馈，大大提升了网页的交互性和用户体验，这在现代网页开发中是非常实用的技巧。