HTML5新增的表單驗證功能

時間 2019-11-10

標籤 html5 html 新增表單驗證功能欄目 HTML5 简体版

原文原文鏈接

1、HTML5表單的特色：

HTML5 表單增長了許多內置的控件和控件屬性
XHTML 中須要放在 form 之中的諸如 input/button/select/textarea 等標籤元素，在 HTML 5 中徹底能夠放在頁面任何位置，並經過新增的 form 屬性指向元素所屬表單的 ID 值，便可關聯起來。

2、HTML5新增的控件類型：

email輸入類型：<input type="email" name="email" />
要求輸入格式正確的 email 地址，不然瀏覽器不容許提交，同時會提示錯誤信息javascript
url輸入類型：<input type="url" />
要求輸入格式正確的 URL 地址，Opera 中會自動在開始處添加 http://
日期時間相關輸入類型：
<input type="date" /><input type="time" /><input type="month" /><input type="week" />
目前 MS 只有 Opera/Chrome 新版本支持，且展現效果也不同
number輸入類型：<input type="number" />
要求輸入格式正確的數字css
range類型：<input type="range" step="2" min="0" max="10" value="2" />
顯示一個可拖動的滑塊條，經過設定 max/min/step 值限定拖動範圍，拖動時會反饋給value一個值html
search輸入類型：<input type="search" />
輸入一個搜索關鍵字，經過 results=s 可顯示一個搜索小圖標java
tel輸入類型：<input type="tel" />
要求輸入一個電話號碼，但實際上並無特殊的驗證，與 text 類型沒什麼區別數據庫
color輸入類型：<input type="color" />
可以讓用戶經過顏色選擇器選擇一個顏色值，並反饋到value中瀏覽器

3、HTML5新增的表單屬性：

placeholder屬性：<input type="text" placeholder="點擊我會清除" />
實現點擊清除表單初始值，MS 除了 Firefox，其餘標準瀏覽器都能很好的支持bash
require/pattern屬性：
<input type="text" name="require" required="" /><input type="text" name="require1" required="required" />
<input type="text" name="require2" pattern="^[1-9]\d{5}$" />
表單驗證屬性require 類型時，若輸入值爲空，則拒絕提交併出現提示，注意在 Opera 中必須指定 name 值，不然無效果。服務器
autofocus屬性：<input type="text" autofocus="true" />
默認聚焦屬性，可在頁面加載時聚焦到一個表單控件，相似於 JS 的 focus()app

list屬性：

<input type="text" list="ilist">
	<datalist id="ilist">
		<option label="a"></option>
		<option label="b"></option>
		<option label="c"></option>
	</datalist>
</input>複製代碼

須要與datalist屬性共用，datalist是對選擇框的記憶，而list屬性能夠爲選擇框自定義記憶的內容ui

max/min/step屬性：<input type="range" max="100" min="1" step="20" />
限制值的輸入範圍，以及值的輸入漸進程度，好比可在 number 設定輸入最大值最小值，或在 range 中設定拖動階梯
autocomplete屬性：<input type="text" autocomplete="on" />
此屬性是爲表單提供自動完成功能，若是該屬性爲打開狀態可很好地自動完成，通常來講，此屬性必須啓動瀏覽器的自動完成功能
data屬性：<select data="http://XX.com/"></select>
HTML5 支持 data 屬性，爲 select 控件外聯數據源，能夠在 select 下拉別表動態的添加來自數據庫的各組選項，好比說國家、省市列表等等。
XML Submission編碼格式：
常見的是 Web Form 的編碼格式是 application/x-www-form-urlencoded。這種格式將數據送到服務器端，能夠方便的存取。HTML5 提供一種新的數據格式：XML Submission，即 application/x-www-form+xml。簡單的舉例說，服務器端將直接接收到 XML 形式的表單數據。

4、簡單的應用例子：

HTML5阻止表單氣泡並顯示提示信息

實現效果：

完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>表單驗證默認樣式修改</title>
</head>
<style> .oneline{line-height: 1.5;margin:10px auto;} .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;} .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;} .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;} .error-message{color:red; font-size:12px;text-indent:108px;} </style>

<body>
    <form id="forms">
        <div class="oneline">
            <label for="name">用戶名:</label>
            <input id="name" name="name" class="sinput" required>
        </div>
        <div class="oneline">
            <label for="email">Email:</label>
            <input id="email" name="email" class="sinput" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" value="提交" id="thesubmit">
        </div>
    </form>
    <script> function replaceValidationUI(form) { form.addEventListener("invalid", function(event) { event.preventDefault(); }, true); form.addEventListener("submit", function(event) { if (!this.checkValidity()) { event.preventDefault(); } }, true); var submitButton = document.getElementById("thesubmit"); submitButton.addEventListener("click", function(event) { var inValidityField = form.querySelectorAll(":invalid"), errorMessage = form.querySelectorAll(".error-message"), parent; for (var i = 0; i < errorMessage.length; i++) { errorMessage[i].parentNode.removeChild(errorMessage[i]); } for (var i = 0; i < inValidityField.length; i++) { parent = inValidityField[i].parentNode; parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>") } if (inValidityField.length > 0) { inValidityField[0].focus(); } }) } var form = document.getElementById("forms"); replaceValidationUI(form); </script>
</body>

</html>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。