站制作的過程中，表單設計與驗證是至關重要的一步，它直接影響著用戶體驗和數據的準確性。一個優秀的表單設計能夠簡化用戶輸入過程，提高用戶滿意度，而有效的錯誤處理則能夠防止錯誤數據的提交，保護網站的安全性和穩定性。本文將詳細介紹網站制作中的表單設計與驗證的關鍵技巧，幫助您優化用戶輸入和錯誤處理，提升網站的整體體驗。

一、關鍵技巧1：簡化表單設計

在設計表單時，應盡量簡化用戶的輸入過程，減少繁瑣的操作和信息的填寫。以下是幾個值得注意的技巧：

1.1 使用合理的表單字段數量：避免設計過多的表單字段，只保留必要的信息項，例如姓名、郵箱、聯系電話等。過多的字段會給用戶造成困擾，并可能導致信息填寫不完整。

1.2 使用清晰的表單標簽與提示：為每個表單字段添加清晰的標簽和必要的提示文字，幫助用戶理解所需填寫的信息內容，并提供合理的格式要求。

1.3 提供默認值和自動填充：對于一些常用字段，可以提供默認值或使用自動填充功能，例如自動填充地址或根據郵編自動填充城市信息。這樣能夠節省用戶的時間和輸入成本。

二、關鍵技巧2：有效的表單驗證

表單驗證是確保用戶提交正確數據的關鍵步驟，以下是一些有效的表單驗證技巧：

2.1 客戶端驗證：使用HTML5的表單驗證功能，例如required、type、pattern等屬性來驗證表單字段的格式，確保用戶輸入的數據符合要求。

2.2 服務器端驗證：客戶端驗證只是一種表面的驗證手段，為了數據的安全性和準確性，必須進行服務器端的驗證。通過編寫后端驗證規則，對用戶提交的數據進行進一步驗證，例如數據的完整性、合法性等。

2.3 錯誤提示信息：當用戶輸入錯誤時，應提供明確的錯誤提示信息，指出錯誤的具體原因和如何修正錯誤。錯誤提示信息應簡潔明了，幫助用戶快速定位并解決問題。

三、關鍵技巧3：友好的錯誤處理

錯誤處理是網站制作中不可忽視的一環，以下是幾個友好的錯誤處理技巧：

3.1 錯誤反饋頁面：當用戶提交錯誤的數據或發生其他錯誤時，應為用戶提供一個友好的錯誤反饋頁面，清晰地顯示錯誤信息，并提供解決問題的建議或聯系方式。

3.2 數據保護與恢復：在用戶提交錯誤數據后，應盡量保護用戶已輸入的正確數據，避免用戶重新填寫所有信息。例如，可以在頁面刷新或返回時，自動填充上次正確的輸入內容。

3.3 日志記錄與分析：對于較為嚴重的錯誤，應及時記錄日志并進行分析，找出錯誤產生的原因，并及時修正，以提升網站的穩定性和安全性。

通過合理的表單設計與驗證，我們能夠簡化用戶輸入的過程，減少錯誤數據的產生，并提升用戶體驗。無論是從用戶的角度還是網站的運營角度來看，優化表單設計與驗證都是非常重要的一項工作。我們希望本文所介紹的關鍵技巧能夠幫助您更好地實現這一目標。

文共3663字，預計學習時長11分鐘

表單驗證是使用HTML5時的一個內置特性，HTML5提供了各種驗證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數據發送到服務器之前，我們可以使用它來驗證表單輸入。但是，我們應該信任發送的內容，所以最終驗證應該仍然在服務器上進行。

當表單輸入有效時，要素將顯示:valid 偽類樣式表。如果它是無效的，那么則出現:invalid 偽類樣式表。

當表單輸入無效時，瀏覽器將阻止表單提交并顯示錯誤信息。

表單驗證屬性

Pattern

Pattern應用于文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。

·它將正則表達式設置為數值，然后瀏覽器對其進行驗證。

Min

該屬性適用于范圍、數字、日期、月、周、時間、本地時間等類型的輸入元素。

·當輸入范圍或數字時，它會檢驗該值是否大于或等于Min屬性的給定值。

·當輸入日期、月份或星期時，它會檢驗日期是否為該屬性給定日期或在給定日期之后。

·當輸入時間時，它會檢驗日期和時刻是否都大于或等于該屬性給定時期。

Max

Max屬性是min屬性的對立面，它檢查輸入的內容是否小于或等于該屬性的給定值。

·當應用于范圍或數字類型的輸入時，它將檢查輸入的數字是否小于或等于min屬性的給定值

·當應用于日期、月份或星期等類型的元素時，它將檢查日期是否小于或等于該屬性值中給定的日期。

·當應用于時間類型輸入時，它將檢查日期和時間是否小于或等于min屬性的給定值。

Required

該屬性驗證輸入元素是否為空。

·它可以用于文本、檢索、鏈接、電話、郵件、密碼、日期、時間、月份、星期、數字、復選框、錄音、文檔，以及被選中內容和文本框等元素。

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中取消隱藏相應的信息。

同樣，我們根據長度的最大最小設定值來檢驗年齡輸入值是否在所屬區間內。若出現錯誤，我們會在HTML中取消隱藏相應的信息。

通過HTML5和JavaScript，不需要任何函數庫就可以檢驗各種類型輸入值的有效性。

我們可以檢驗長度、范圍、任何帶有正則表達式的模式等輸入元素，但在保存之前應當檢查服務器端，因為部分用戶仍可以破解瀏覽器端應用程序來跳過驗證。

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

12306公告網絡購票需要驗證手機號|

昨天，一則消息在微信群、QQ群流傳：“為整頓購票秩序，每個用戶的12306購票賬號需驗證自己的手機號，如果在12月2日之前不驗證，12月2日之后或將無法再12306平臺上購票，需持身份證去火車站驗證才可購票!請大家登陸12306網站或者手機客戶端進行手機號驗證?！?/p>

雷鋒網登陸購票APP測試了一下，發現確實需要驗證手機號，否則影響購票，但彈出的窗口上并沒有標注截止日期。新華社詢問了12306官方，對方稱并不會截止。

鑒于12306是唯一的一級網絡購票出口，既然早晚都要驗證，早一點驗證總是沒錯的。

|奇虎360或數周內達成最終私有化協議|

國外媒體報道，之前向奇虎360提出90億美元私有化要約的投資集團已接近與奇虎360達成最終的私有化協議，將以每股美國存托股約77美元的價格收購奇虎360。

奇虎360今年6月曾宣布，公司董事會已接到簽署日期為2015年6月17日的初步非約束性私有化要約。知情人士稱，最終的私有化協議有望于未來數周內達成。屆時，這筆交易將成為在美上市的中國公司中最大規模的私有化交易。同時，如業界預測的一樣，一旦交易完成，奇虎360將考慮在國內A股上市。

|Flash因其自身安全隱患遭Adobe棄用|

據國外媒體報道，Adobe發表聲明表示，鼓勵開發人員使用新的web標準，比如HTML5， 并停止使用Flash。同時將Flash重新命名為Animate CC，棄用原來的命名Flash Professional CC。

在過去的十年里，Flash已經逐漸在人們的視線中淡出。除了iOS不支持Flash，之外，另外的原因是它容易造成安全隱患。盡管Flash最初在創建網頁游戲和動畫方面發揮了很大作用，但它的缺點也越來越突出。例如Flash頁面和Flash播放器加載很慢同時快速消耗筆記本電量。而且Flash一直以來的安全問題也使得網頁瀏覽者面臨極大風險。

Adobe聲明仍然會為Flash提供支持，但主要的支持工作將集中在安全方面。

|Google Glass新專利曝光，竟然是單邊懸掛式設計|

據國外媒體報道，谷歌眼鏡（Google Glass）并沒有死。根據美國專利商標局最新披露的信息顯示，谷歌很可能將重新設計這款可以佩戴于眼部的穿戴式設備，并以單邊懸掛式的新外觀再次示人。

從谷歌專利示意圖上可看出，這款設備可能固定在用戶臉部的一側，掛在一只耳朵上，將顯示屏放在眼睛上方。這項專利描述了一種能夠根據每個用戶的頭部調節的設備，而且不用的時候還可以折疊起來。該設備提供頭戴顯示器，可以播放視頻，另外一只眼睛也可以借助棱鏡的幫助看到圖像。

與其他專利一樣，現在無法確保專利中描述的新技術能夠正式推出，尤其是考慮到這項專利是2012年9月提交的——遠早于谷歌眼鏡引發公眾關注的時間。但通過提供這樣一款不太引人注意的設備，或許可以降低人們的反感。

|零度指控發布農業無人機“守護者Z10”|

繼大疆之后，國內知名無人機廠商零度智控也發布了農業無人機，型號命名 “守護者—Z10”，是零度農業無人機"守護者"系列首款產品。

“守護者—Z10”配備了2.4GHz雙向傳輸遙控器，可實現一鍵起飛、一鍵降落和一鍵返航的“三一功能”，并可在遙控器上直接設置規整土地的噴灑航線。“守護者—Z10”采用模塊化設計，可快速更換易損件，使后期維護更加便捷、經濟。

就在幾天前，大疆也發布了農業無人機MG-1。

點擊“閱讀原文”可免費申請試用“高斯德智能電動滑板車”總共5輛，成功即可免費獲得

微信ID：leiphone-sz

長按左側二維碼關注