不使用JS實現表單驗證

我們可以給表單元素添加required，pattern屬性，還有根據具體元素類型決定的Measureable屬性，如：min，max等。

required：表示必填。

pattern：一般用於type為text的元素，可以是任意的正則表達式。

ID Number: <input type="text" name="idNumber" 
                      pattern="\d{5}" required="required"
                      placeholder="enter your 5 digit id number"/>

 

Measureable不是指一個屬性，是指特定type值的元素的一類屬性，如：

type為number的有min，max。

<form autocomplete="on">
    Number(between 1 and 5):<input type="number" min="1" max="5" required/>
    <input type="submit"/>
</form>

 

type為email的會默認按照email的嚴格格式驗證。

<form autocomplete="on">
    Email:<input type="email" required/>
    <input type="submit"/>
</form>

 

驗證email的正則表達式可能是這樣的：

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

 

通過setCustomValidity()方法添加定制的錯誤消息提示內容，如下圖：

此外還可以通過以下偽類對元素進行修飾：

:required 標識被標記為required的元素。

:invalid 標識被標記為invalid的元素。

novalidate屬性可以讓表單跳過驗證直接提交