整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能，接下來我們來說1下自動驗證。
在html5中，通過對元素使用屬性的方法，可以實現在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內容是不是為數字，如果驗證通不過，將顯示毛病信息文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="提交">
</form>
</body>
</html>
接下來我們來看1下在html5 中追加的關于對元素內輸入內容進行限制的屬性的指定。
1.required屬性
html5 中新增的required屬性可以利用在大多數輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內容，效果如圖
2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設置為某個格式的正則表達式，在提交時會檢查其內容是不是符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內容必須符合給定格式，代碼以下，要求輸入內容為1個數字與3個大寫字母：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入指定內容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數字3個大寫字母">
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
3.min屬性與max屬性
min與max這兩個屬性是日期類型或數值類型的input元素的專用屬性，他們限制了在input元素中輸入的數值與日期的范圍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入數值:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
4.step屬性
step屬性控制input元素中的值增加過減少時的步驟。例如當你想讓用戶輸入的值在0與100之間，但必須是5的倍數時，你可以指定step為5，代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>
效果以下：
原文：http://www.wfuyu.com/htmlcss/27520.html
<form method="提交方式" action="提交地址">
表單元素
</form>
1. <input type="元素類型" name="元素名稱" />
2. 特殊的
<select>
<option value="選項的值">選項的文本</option>
...
</select>
<textarea name="" rows="行數" cols="列數">值</textarea>
1. 用來填的
text : 單行文本框
password : 密碼框
textarea : 多行文本框
email : 郵件地址輸入框
url : 網址輸入框
number : 數字輸入框
屬性:
size可以控制寬度
maxlength可以控制最大輸入的字符數
max(最大值), min(最小值)對number，range有效
2. 用來選的
checkbox : 復選框
radio : 單選框
select : 下拉列表框
屬性:
checked用于默認選中radio和checkbox
selected用于默認選中select中的option選項
value用于設置元素的值
3. 用來點的
submit : 提交按鈕
reset : 重置按鈕
button : 一般按鈕, 沒有功能
image : 圖片按鈕, 功能上等同于submit
4. 其它的
file : 文件域, 用于文件上傳
hidden : 隱藏域, 作用不明
range：滑塊
設置表單要注意的地方
1. 一組radio應該設置相同的name, 這樣才能"互斥"
2. 除按鈕外, 其它表單元素都應該設置name屬性
3. 用于選擇的元素都應該設置value
表單元素的只讀和禁用
readonly
disabled
使用label提高用戶體驗
label稱為"標注", 可以擴大表單元素的可操作區域, 點擊label就等價于點擊了對應的表單元素.
方式一:
<label for="表單元素的id">文本</label>
方式二:
<label>
文本
<input />
</label>
1. 用戶提示
<input placeholder="提示信息" />
2. 用required實現必填驗證
<input required="required" />
3. 用pattern實現復雜的文本信息驗證(正則表達式)
<input pattern="[a-zA-Z]{4,9}" /> //必須由4-9位字母組成
<input pattern="1[35][0-9]{9}" /> //必須是13xxxxxxxxx或15xxxxxxxxx
<input pattern="[\u4E00-\u9FA5]{5}" /> //必須由5位中文字符組成
注意: email, url等元素自帶pattern驗證規則
文共3663字，預計學習時長11分鐘
來源：Pexels
表單驗證是使用HTML5時的一個內置特性，HTML5提供了各種驗證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數據發送到服務器之前，我們可以使用它來驗證表單輸入。但是，我們應該信任發送的內容，所以最終驗證應該仍然在服務器上進行。
當表單輸入有效時，要素將顯示:valid 偽類樣式表。如果它是無效的，那么則出現:invalid 偽類樣式表。
當表單輸入無效時，瀏覽器將阻止表單提交并顯示錯誤信息。
Pattern
Pattern應用于文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。
·它將正則表達式設置為數值，然后瀏覽器對其進行驗證。
Min
該屬性適用于范圍、數字、日期、月、周、時間、本地時間等類型的輸入元素。
·當輸入范圍或數字時，它會檢驗該值是否大于或等于Min屬性的給定值。
·當輸入日期、月份或星期時，它會檢驗日期是否為該屬性給定日期或在給定日期之后。
·當輸入時間時，它會檢驗日期和時刻是否都大于或等于該屬性給定時期。
Max
Max屬性是min屬性的對立面，它檢查輸入的內容是否小于或等于該屬性的給定值。
·當應用于范圍或數字類型的輸入時，它將檢查輸入的數字是否小于或等于min屬性的給定值
·當應用于日期、月份或星期等類型的元素時，它將檢查日期是否小于或等于該屬性值中給定的日期。
·當應用于時間類型輸入時，它將檢查日期和時間是否小于或等于min屬性的給定值。
Required
該屬性驗證輸入元素是否為空。
·它可以用于文本、檢索、鏈接、電話、郵件、密碼、日期、時間、月份、星期、數字、復選框、錄音、文檔，以及被選中內容和文本框等元素。
來源：Pexels
Step
Step檢驗輸入值是否為整數。
·若輸入日期類型的元素，它會檢查天數是否為整數。
·若輸入月份類型的元素，它會檢查月份數是否為整數。
·若輸入星期類型的元素，它會檢查星期數是否為整數。
·若輸入時間類型的元素，它會檢查秒數是否為整數。
·若輸入范圍和數字類型的元素，它會檢查范圍和數值是否為整數。
Minlength
Minlength屬性可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字數是否大于或等于該屬性值。
Maxlength
Maxlength屬性同樣可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字數是否小于或等于該屬性值。
我們可以通過將表單驗證屬性添加到元素中來使用它們。例如，編寫一份以電子郵件地址作為輸入的表單。
第一步，輸入以下HTML語言：
<formid='form'> <labelfor="email">What's your email address?</label> <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+"> <buttontype='submit'>Submit</button></form>在上述代碼中，輸入元素帶有required屬性，根據設定進行輸入。
同時，我們還以電子郵件地址的正則表達式作為值，對其添加pattern屬性。
接著如下所示，當輸入有效或無效時，我們通過添加樣式表來改變輸入元素的邊界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}來源：view rawinput.css 平臺： GitHub
此處會用到文章開頭提及的偽類樣式來完成這一步驟。
最后，通過調用preventDefault來添加JavaScript代碼以防止本例中的表單提交。
constform = document.querySelector('#form');form.onsubmit = (e) => { e.preventDefault();}
再舉一個檢查輸入的長度和范圍的例子。比如，編寫如下 HTML代碼來獲取用戶的姓名和年齡：
<formid='form'> <labelfor="name">What's your name?</label> <inputid="name" name="name" requiredminlength='5' maxlength='20'> <br> <spanid='name-too-short' hidden>Name is too short</span> <spanid='name-too-long' hidden>Name is too long</span> <br> <labelfor="age">What's your age?</label> <inputid="age" name="age" type='number' requiredmin='0' max='150'> <br> <spanid='age-too-high' hidden>Age is too high</span> <spanid='age-too-low' hidden>Age is too low</span> <br> <buttontype='submit'>Submit</button></form>輸入的姓名和年齡都具有長度和范圍屬性，當輸入無效時，可以看到以文中所示形式出現的輸入信息。
與例一相同，當輸入元素有效或無效時，輸入樣式表來更改輸入框邊界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}最后，當輸入無效時可以通過JavaScript看到驗證信息：
const form = document.querySelector('#form');const name = document.querySelector('#name');const age = document.querySelector('#age');const nameTooShort = document.querySelector('#name-too-short');const nameTooLong = document.querySelector('#name-too-long');const ageTooLow = document.querySelector('#age-too-low');const ageTooHigh = document.querySelector('#age-too-high');form.onsubmit= (e) => { e.preventDefault();}name.oninput= (e) => { nameTooShort.hidden=true; nameTooLong.hidden=true; if (e.srcElement.validity.tooShort) { nameTooShort.hidden=false; }if (e.srcElement.validity.tooLong) { nameTooLong.hidden=false; }}age.oninput= (e) => { ageTooLow.hidden=true; ageTooHigh.hidden=true; if (e.srcElement.validity.rangeOverflow) { ageTooHigh.hidden=false; }if (e.srcElement.validity.rangeUnderflow) { ageTooLow.hidden=false; }}在上述代碼中，將oninput事件處理程序設置為事件處理程序函數，以便檢查后續輸入的有效性。
在每個函數中，我先隱藏所有信息，這樣就不會看到過時的消息了。然后，根據設置的最小和最大長度來檢查名稱輸入是否太短或太長。
若出現任何錯誤，會在HTML中取消隱藏相應的信息。
來源：Pexels
同樣，我們根據長度的最大最小設定值來檢驗年齡輸入值是否在所屬區間內。若出現錯誤，我們會在HTML中取消隱藏相應的信息。
通過HTML5和JavaScript，不需要任何函數庫就可以檢驗各種類型輸入值的有效性。
我們可以檢驗長度、范圍、任何帶有正則表達式的模式等輸入元素，但在保存之前應當檢查服務器端，因為部分用戶仍可以破解瀏覽器端應用程序來跳過驗證。
留言點贊關注
我們一起分享AI學習與發展的干貨
如轉載，請后臺留言，遵守轉載規范
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
