github： krisachan
在我們的日常業務中，表單驗證是個很常見設計需求，像一些登入註冊框，問卷調查也都需要用到表單驗證。
一般我們的實現思路都是js監聽input框的輸入內容，判斷使用者輸入內容，從而以此來決定下一步的操作。
例如這樣：（以下例子來自優秀的開源ui庫，element）
"numbervalidateform" ref="numbervalidateform" label-width="100px" class="demo-ruleform">
"年齡"
prop="age"
:rules="[,]"
>
type="age" v-model.number="numbervalidateform.age" autocomplete="off">
type="primary" @click="submitform('numbervalidateform')">提交
"resetform('numbervalidateform')">重置
複製**
上面的表單驗證就完全是由css來實現的，核心屬性就是css level 4的validity。思路就是利用:valid跟:invalid可以對的value進行判斷的特性。
/*
* css
*/ :root
.form > input
.form > .f-tips
input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"]
input[required]:invalid + span
/** html
*/class="form"
id="form"
method="get"
action="/api/form">
賬號：data-title="賬號"
pattern="\w"
name="account"
type="text"
required />
class="f-tips">請輸入正確的賬號span>
密碼：data-title="密碼"
pattern="\w"
name="password"
type="password"
required />
class="f-tips">請輸入正確的密碼span>
name="button"
type="submit"
value="提交" />
form>
複製**
1.html5裡的新屬性：pattern
mdn的解釋：
檢查控制項值的正規表示式.。pattern必須匹配整個值，而不僅僅是某些子集.。使用title屬性來描述幫助使用者的模式.。當型別屬性的值為text, search, tel, url 或 email時，此屬性適用，否則將被忽略。（相容ie10+）
備註：
如果pattern裡的驗證規則不合法，例如多了長度校驗內多了空格，也是會在控制台報錯的，詳情如下：
"賬號" pattern="/[\w]/" name="account"
type="text" required />
複製**
css與js裡的驗證規則不一樣，以下寫法是會無效的，核心校驗規則需要用"賬號" pattern="/\w/" name="account"
type="text" required />
複製**
css level 4 選擇器的新屬性：invalid
詳細介紹請看我的博文[譯]19個css level 4 選擇器
魚頭的web海洋」，隨時與魚頭互動。歡迎！衷心希望可以遇見你。
純CSS實現表單驗證
關鍵在於使用css selectors levle4裡的一些偽類實現表單驗證，這些偽類有 上面的案例就是使用了 in range和 out of range，接下去我們來一一解讀下。required可以選中具有required屬性的表單元素，可以是input select和textarea，例如下面...
多個form 驗證 css實現input表單驗證
我有這個想法是因為我想完成乙個自動補全的input部件，最基本的功能是 如果input沒有內容，這隱藏下拉框 反之，顯示下拉框 我找到了乙個也許不是很完美的實現方案，描述中可能會有一些細微的區別，不過我還是很希望能做這個簡單的分享 首先，我們構造乙個簡單的form表單，僅僅只有乙個input 當輸入...
純css實現箭頭
很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...