不使用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屬性可讓表單跳過驗證直接提交