1.：valid用於匹配輸入值為合法的元素
2.：invalid用於匹配輸入值為非合法的元素
3. required屬性規定必須在提交前填寫輸入字段
4. pattern屬性規定用於驗證字段的正則表達式
：valid/：invalid選擇器只作用於能指定區間的元素，例如input元素中的min和max屬性，及正確的email字段，合法的數字字段等。
required屬性適用於以下<input>類型：text，search，url，telephone，email，password，data pickers，number，checkbox，radio以及file.當然textarea也可以
：valid，：invalid示例
<style>
input{
display: block;
padding: 0 20px;
outline: none;
border:1px solid #ccc;
width: 150px;
height: 40px;
transform: all 300ms;
}
/* input內容合法，邊框顏色是綠色 */
input:valid{
border-color: green;
box-shadow: inset 5px 0 0 green;
}
/* input內容非法，邊框顏色是紅色 */
input:invalid{
border-color: red;
box-shadow: inset 5px 0 0 red;
}
</style>
</head>
<body>
<input type="text" placeholder="請輸入手機號" pattern="^1[3456789]\d{9}$" required>
</body>
預覽效果：
