css3验证提示框

CSS3验证提示框

    .error {
      display: none;
      background: #F2DEDE;
      border: 1px solid #EED3D7;
      color: #B94A48;
      padding: 5px;
      margin: 5px 0;
      border-radius: 5px;
    }
    
    input[type="submit"]:invalid + .error {
      display: block;
    }

CSS3验证提示框是一种在表单提交时可以向用户呈现错误消息的强大方法。非常方便的利用CSS3实现。通过设置“input: invalid”伪类选择器，可以有效地实现这个过程，并向输入框输入无效字符时显示错误消息。如果您想像下面的例子一样应用这个特性，当输入框不满足要求时便会出现一个红色警告消息。

    .input[type="text"]:invalid {
      border-color: #f00;
    }
    .input[type="text"]:valid {
      border-color: #0f0;
    }

通过这种方式，您可以使用户更好地了解输入变量类型和要求，且不必考虑代码的复杂性和安全性。使用CSS3验证提示框还可以开发智能电子表单应用程序，并在用户输入无效数据时通过错误消息进行更好的反馈。