免費AI編程助手
HTML 表單驗證
2018-06-16 16:18 更新
HTML表單驗證
HTML5引入了對輸入驗證的支持。您通過屬性管理輸入驗證。
以下列表顯示了哪些元素和輸入類型支持不同的驗證屬性。
- 驗證屬性: required
元素: textarea, select, input (text, password, checkbox, radio, file, datetime,datetime-local, date, month, time, week, number, email, url, search, 和 tel 類型) - 驗證屬性: min, max
元素: input (datetime, datetime-local, date, month, time, week, number, 和 range 類型) - 驗證屬性: pattern
元素: input (text, password, email, url, search, 和 tel 類型)
required輸入
最簡單的輸入驗證是確保用戶提供一個值。您使用必需屬性執(zhí)行此操作。
在提供值之前，用戶不能提交表單。
以下代碼顯示了正在使用的必需屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input type="text" required id="name" name="name" />
</label>
</p>
<p>
<label for="password"> Password:
<input type="password" required placeholder="Min 6 characters" id="password"
name="password" />
</label>
</p>
<p>
<label for="accept">
<input type="checkbox" required id="accept" name="accept" /> Accept Terms & Conditions
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>bounded輸入
您可以使用 min 和 max 屬性來確保數(shù)值和日期值在特定范圍內。
您不需要應用這兩個屬性。
min 和 max 值是包含性的，這意味著如果您指定最大值為100，則允許最大值（包括100）的任何值。
以下代碼顯示了應用于輸入元素的數(shù)字類型的這些屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="price"> $ per unit in your area: <input
type="number" min="0" max="100" value="1" id="price" name="price" />
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>匹配模式
pattern 屬性確保值與正則表達式匹配。
以下代碼顯示了正在使用的pattern屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input type="text" id="name"
name="name" pattern="^.* .*$" />
</label>
</p>
</form>
</body>
</html>該模式確保用戶輸入兩個名稱，用空格分隔。
電子郵件或網(wǎng)址
輸入元素的電子郵件和網(wǎng)址類型確保用戶已分別輸入有效的電子郵件地址或完全限定的網(wǎng)址。
我們可以將pattern屬性與這些類型組合以限制值，例如將電子郵件地址限制為特定域。
以下代碼將模式屬性與電子郵件輸入元素類型一起使用。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="email"> Email: <input type="email"
placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
id="email" name="email" />
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>上面的代碼使用了三個驗證功能。
- 輸入元素的電子郵件類型確保使用輸入有效的電子郵件地址。
- 必需屬性確保用戶提供值。
- pattern屬性確保電子郵件地址屬于特定域（mydomain.com）。
禁用驗證
您可以通過將novalidate屬性應用于表單元素，或將formnovalidate屬性應用于可以提交表單的按鈕和輸入元素的類型來禁用表單驗證。
以下代碼顯示了如何禁用表單驗證。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="email"> Email: <input type="email"
placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
id="email" name="email" />
</label>
</p>
<input type="submit" value="Submit" /> <input type="submit"
value="Save" formnovalidate />
</form>
</body>
</html>以上內容是否對您有幫助：
更多建議：