使用伪元素在有效输入字段上显示 ✓ 标记。

9 浏览
0 Comments

使用伪元素在有效输入字段上显示 ✓ 标记。

下面是我尝试使用CSS的content属性来添加勾号以显示有效的必填字段，但并没有成功。\n因为我没有真正看到过这样做，所以这样做可能不可行吗？使用JavaScript会更有效吗？\n我想听听大家对我应该如何实现此功能以获取用户反馈的意见。\nCSS代码如下：\ninput[type=text]:valid {\n border: 1px solid green;\n}\ninput[type=text]:valid:after {\n content: \'✓\';\n color: green;\n}\nHTML代码如下：\n用户名：\n\n这基本上回答了我的问题：\n链接：http://codepen.io/brentrobbins/pen/beexQR

0

1 答案

0 Comments

在上述代码中，作者想要在有效的输入字段上显示一个 ✓ 标记，无效的输入字段上显示一个 × 标记。然而，input 元素不能直接使用伪元素 ::before 或 ::after。因此，作者提出了两种解决方法。

第一种解决方法是将一个 <span> 元素包裹在输入字段周围，并应用 span:after 伪元素来显示标记。

第二种解决方法是在输入字段后面使用一个 img 元素来显示标记。

作者还使用了 jQuery 的 .valid() 方法来检查表单的有效性，并根据结果改变 span 元素的 CSS 类。

通过为有效的输入字段添加 isvalid 类，为无效的输入字段添加 notvalid 类，作者可以通过 CSS 来显示不同的标记和边框颜色。

以下是完整的代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<p>Username:</p>
<form>
<span class="notvalid"><input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required></span>
  </form>

span.isvalid:after
{
  content: '✓';
  color: green;
}
span.notvalid:after{
     content: '×';
     color: red;
}
.isvalid input[name=username]{
    border: 2px solid green;
}
.notvalid input[name=username]{
    border: 2px solid red;
}

$('[name=username]').keyup(function(){
    if($('form').valid()){
         $(this).parent().removeClass().addClass('isvalid');
     }else{
             $(this).parent().removeClass().addClass('notvalid');
        
     }
})

通过这两种解决方法，作者成功地在有效的输入字段上显示了 ✓ 标记，并在无效的输入字段上显示了 × 标记。同时，根据输入字段的有效性，还改变了边框的颜色。

0