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

表单控件一些属性:

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

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

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

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

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

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

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

一、示例

复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>    
  <link rel="stylesheet" href="css/regisit.css">
  <style>
    *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    ol {
      width: 400px;
      margin: 50px;
    }
    li {
      clear: both;
      list-style-type: none;
      margin: 0 0 10px;
    }
    li:nth-last-child(1) {
      text-align: center;
    }
    label {
      display: block;
      float: left;
      margin: 0 10px 0 0;
      padding: 5px;
      text-align: right;
      width: 100px;
    }
    input{
     padding: 0 10px;
     outline: none;
     border: 1px solid #ccc;
     width: 260px;
     height: 30px;
     transition: all 300ms;
   }
   input:focus {
    outline: none;
   }
   /*input内容合法,边框颜色*/
   input:valid {
     border-color: green;
     box-shadow: inset 5px 0 0 green;
   }
   /*input内容合法且鼠标未移开,边框颜色*/
   input:focus:valid {
     border-color: yellow;
     box-shadow: inset 5px 0 0 yellow;
   }
   /*input内容非法,边框颜色*/
   input:invalid:required {
     border-color: red;
     box-shadow: inset 5px 0 0 red;
   }
   input[type="submit"] {
    border: none;
    box-shadow: 0 0 5px #7ab526;
    cursor: pointer;
    padding: 7px;
    width: 150px;
    background: linear-gradient(90deg, #5ada40 0%, #eb59c6 100%);
  }
  input[type="reset"] {
    margin-left: 10px;
    border: none;
    box-shadow: 0 0 5px #7ab526;
    cursor: pointer;
    padding: 7px;
    width: 150px;
    background: linear-gradient(90deg, #4FE7CE 0%, #E65032 100%);
  }
</style>
</head>
<body>
  <form>
   <ol>
     <li>
       <label for="url">姓名:</label>
       <input type="text" required name="" id="name">
     </li>
     <li>
       <label for="tel">手机号:</label>
       <input type="text" placeholder="请输入手机号" maxlength="11" pattern="^1[3456789]\d{9}$" required/>
     </li>
     <li>
       <input type="submit" name="" value="提交表单">
       <input type="reset" name="" value="清空表单">
     </li>
   </ol>
 </form>
</body>
</html>
相关推荐
IT_陈寒3 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只20 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience24 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹25 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
三月暖阳26 分钟前
分享并记录日常开发中的一些CSS布局和样式技巧(持续更新)
css·scss
JarvanMo27 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse27 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye32 分钟前
前端架构师,是架构什么
前端·架构
全马必破三35 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库40 分钟前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库