html - 使用 SASS 进行 HTML 表单验证？

Question

我有一个表单，其中所有输入字段都有一个“必需”和“模式”参数。

我想在输入框的右侧显示一个绿色的小图片，只要输入不是无效的，就可以向用户展示他已经正确填写了。

我想知道是否可以不使用 javascript/jquery 而使用纯 css/sass？

我在想类似的东西

if input:invalid{
    .divonrightofinputbox{
    background:url('green.png');
    }
}else{
    .divonrightofinputbox{
    display:none;
    }
}

这对 sass 可行吗？如果可以，怎么办？:)

提前感谢您的帮助！

Answer 1

Sass 对文档或其形式的状态一无所知。你只需要使用 CSS 提供的东西：

input {
    &:required {
        + .div-after-the-input {
            // required styles
        }
    }

    &:invalid, &:out-of-range {
        + .div-after-the-input {
            background: url('invalid.png') no-repeat;
        }
    }

    &:valid, &:in-range {
        + .div-after-the-input {
            display: none;
        }
    }
}