在css中如何实现表单验证效果

表单控件一些属性：

:valid —— 用于匹配输入值为合法的元素

:invalid —— 用于匹配输入值为非法的元素

pattern —— 属性规定用于验证输入字段的正则表达式

required —— 属性规定必需在提交之前填写输入字段

注意：required 属性适用于这些 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio,textarea 以及 file。

:valid/:invalid —— 选择器用于在表单元素中的值是合法/非法时设置指定样式。

注意： :valid/:invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，以及正确的 email 字段, 合法的数字字段等。
一、示例

  
  
  
      
  
  


  

   

     

       姓名：
       
     
     

       手机号：