如何使用HTML、CSS和JavaScript实现带有遮罩的表单验证提示？

翻滚的胖子
2023-07-27 12:26:48
前端技术
CSS JavaScript

HTML、CSS和JavaScript是前端开发中最常用的技术之一。本文将介绍如何使用这三种技术来实现带有遮罩的表单验证提示。

首先，我们需要在HTML中创建一个表单。可以使用<form>标签来定义表单，并在其中添加需要验证的输入字段。

<form>
    <div class="input-group">
        <label for="username">用户名:</label>
        <input type="text" id="username">
    </div>
    <div class="input-group">
        <label for="password">密码:</label>
        <input type="password" id="password">
    </div>
    <button type="submit">提交</button>
</form>

接下来，我们需要使用CSS来创建遮罩效果。可以使用伪类选择器和属性选择器来选中需要验证的输入字段，并通过添加样式来实现遮罩效果。

input:focus:invalid {
    border-color: red;
}

input:focus:invalid + .tooltip {
    display: block;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: red;
    color: white;
    padding: 5px;
}

在CSS中，我们使用:focus伪类选择器来选中获取焦点的输入字段，并使用:invalid伪类选择器来选中验证不通过的输入字段。

最后，我们需要使用JavaScript来实现表单验证提示。可以通过函数和事件监听来实现。

function validateForm() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    
    if (username === '') {
        showTooltip('username', '用户名不能为空');
        return false;
    }
    
    if (password === '') {
        showTooltip('password', '密码不能为空');
        return false;
    }
    
    return true;
}

function showTooltip(id, message) {
    var tooltip = document.createElement('div');
    tooltip.classList.add('tooltip');
    tooltip.innerText = message;
    
    var input = document.getElementById(id);
    input.parentNode.appendChild(tooltip);
}

var form = document.getElementsByTagName('form')[0];
form.addEventListener('submit', validateForm);

在JavaScript中，我们定义了一个validateForm函数来验证表单。如果输入字段为空，则通过showTooltip函数显示相应的提示信息，并返回false阻止表单提交。

通过以上步骤，我们可以实现带有遮罩的表单验证提示。当用户在输入字段中输入无效的值时，会触发验证并显示相应的提示信息。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com