、為什么需要表單驗(yàn)證？

表單是Web開發(fā)中常用的交互元素，用戶通過表單提交數(shù)據(jù)給后端進(jìn)行處理。然而，用戶輸入的數(shù)據(jù)不可靠，因此需要進(jìn)行表單驗(yàn)證，確保用戶輸入的數(shù)據(jù)符合預(yù)期。

二、基本的表單驗(yàn)證規(guī)則

必填字段：確保用戶填寫了必填字段，如用戶名、密碼等。

格式驗(yàn)證：驗(yàn)證用戶輸入的數(shù)據(jù)格式是否正確，如郵箱、手機(jī)號、日期等。

長度驗(yàn)證：驗(yàn)證用戶輸入的數(shù)據(jù)長度是否符合要求，如密碼長度、字符數(shù)等。

數(shù)字范圍驗(yàn)證：驗(yàn)證用戶輸入的數(shù)字是否在指定范圍內(nèi)，如年齡、價(jià)格等。

一致性驗(yàn)證：驗(yàn)證兩個(gè)或多個(gè)輸入字段的值是否一致，如密碼確認(rèn)、郵箱確認(rèn)等。

三、使用JavaScript進(jìn)行表單驗(yàn)證的步驟

1、獲取表單元素：

const form=document.getElementById('myForm');

2、監(jiān)聽表單提交事件：

form.addEventListener('submit', function(event) {
 event.preventDefault(); // 阻止表單的默認(rèn)提交行為
 // 表單驗(yàn)證邏輯
});

3、編寫驗(yàn)證函數(shù)：

function validateForm() {
 // 獲取表單字段的值
 const username=document.getElementById('username').value;
 const email=document.getElementById('email').value;
 // 必填字段驗(yàn)證
 if (username==='' || email==='') {
 alert('用戶名和郵箱不能為空！');
 return false;
 }
 // 郵箱格式驗(yàn)證
 const emailRegex=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 if (!emailRegex.test(email)) {
 alert('請輸入正確的郵箱格式！');
 return false;
 }
 // 其他驗(yàn)證邏輯...
 return true; // 表單驗(yàn)證通過
}

4、表單驗(yàn)證：

form.addEventListener('submit', function(event) {
 event.preventDefault(); // 阻止表單的默認(rèn)提交行為
 if (validateForm()) {
 form.submit(); // 提交表單
 }
});

5、錯(cuò)誤提示：

<form id="myForm">
  <label for="username">用戶名：</label>
  <input type="text" id="username" required>
  <br>
  <label for="email">郵箱：</label>
  <input type="email" id="email" required>
  <br>
  <button type="submit">提交</button>
</form>

在以上示例中，我們通過JavaScript實(shí)現(xiàn)了對用戶名和郵箱字段的表單驗(yàn)證。在提交表單時(shí)，會(huì)先調(diào)用validateForm函數(shù)進(jìn)行驗(yàn)證，如果驗(yàn)證通過則提交表單，否則提示錯(cuò)誤信息。

四、常用的表單驗(yàn)證技巧

使用正則表達(dá)式進(jìn)行格式驗(yàn)證，如郵箱、手機(jī)號等。

使用HTML5表單驗(yàn)證屬性，如required、pattern、min、max等。

使用第三方表單驗(yàn)證插件，如jQuery Validation等，簡化表單驗(yàn)證的編寫。

五、表單驗(yàn)證的優(yōu)化與提升

實(shí)時(shí)驗(yàn)證：使用input或change事件實(shí)時(shí)驗(yàn)證用戶輸入，及時(shí)提醒用戶輸入錯(cuò)誤。

提示友好：使用合適的提示方式，如文字提示、圖標(biāo)提示等，讓用戶易于理解和操作。

全局驗(yàn)證：在表單提交之前對整個(gè)表單進(jìn)行驗(yàn)證，確保所有字段的正確性。

客戶端與服務(wù)器端驗(yàn)證：前端表單驗(yàn)證只是為了提高用戶體驗(yàn)和減少無效請求，真正的安全性還需要服務(wù)器端驗(yàn)證。

通過以上步驟和技巧，你可以使用JavaScript輕松實(shí)現(xiàn)表單驗(yàn)證，為用戶提供安全智能的交互體驗(yàn)！不僅能提高用戶滿意度，也能讓你在前端開發(fā)領(lǐng)域脫穎而出！快來學(xué)習(xí)吧！

六、總結(jié)

表單驗(yàn)證在Web開發(fā)中扮演著重要的角色，通過JavaScript的靈活運(yùn)用，可以實(shí)現(xiàn)各種表單驗(yàn)證需求。合理的表單驗(yàn)證不僅能提升用戶體驗(yàn)，還能保障數(shù)據(jù)的準(zhǔn)確性和安全性。希望本文能夠幫助你掌握J(rèn)avaScript表單驗(yàn)證的基本技巧和優(yōu)化方法，打造安全智能的用戶交互體驗(yàn)！

是一個(gè)注冊需求，要求用戶在注冊的時(shí)候需要填寫注冊信息并上傳“營業(yè)執(zhí)照”等信息。表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示，圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽。既然是注冊我們當(dāng)然是用form表單來提交了，對應(yīng)的ElementUI組件標(biāo)簽則是el-form。

表單數(shù)據(jù)

從上面的圖可以看出注冊環(huán)節(jié)分為了兩部分?jǐn)?shù)據(jù)，左邊是注冊時(shí)需求提交的表單信息，右邊是需求上傳的圖片。先來解決左邊的表單數(shù)據(jù)，el-form是ElementUI封裝的表單組件，可以收集、校驗(yàn)和提交數(shù)據(jù)。el-form中的model用來綁定表單數(shù)據(jù)對象，el-form-item中的prop為model對象中傳遞的字段，el-input中的v-model綁定的是該字段對應(yīng)的屬性值。

el-upload組件

input的name屬性是用來定義input元素的名稱，只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。input的value屬性的type屬性來決定，type屬性屬性可以是button、reset、submit、text、password、hidden、checkbox、radio、image、file等。el-upload組件就是封裝的type屬性為file的input，并提供了before-upload、on-progress、on-success、on-error、on-preview、on-remove等鉤子函數(shù)來獲取上傳過程中的屬性狀態(tài)等信息。

表單驗(yàn)證

ElementUI提供了表單驗(yàn)證的規(guī)則，可以通過rules屬性來定義對應(yīng)el-form-item中的驗(yàn)證規(guī)則（支持多個(gè)規(guī)則驗(yàn)證）。當(dāng)然如果覺得ElementUI提供的表單驗(yàn)證功能無法滿足項(xiàng)目需求我們也可以自定義驗(yàn)證規(guī)則。通過validator屬性調(diào)用自定義的校驗(yàn)方法，自定義校驗(yàn)callback必須被調(diào)用。自定義校驗(yàn)規(guī)則可以參考文章【Vue實(shí)戰(zhàn)084：自定義表單校驗(yàn)規(guī)則及常用表單校驗(yàn)分享 】，我將一些常用的校驗(yàn)都寫在了一起方便后續(xù)直接使用。

文件上傳HTML構(gòu)建

ElementUI提供了一個(gè)封裝好的<input type='file'>的上傳組件el-upload，封裝了文件上傳的一系列鉤子函數(shù)，可以監(jiān)聽文件上傳過程中的所有事件。el-upload連請求也封裝了，只要通過action提供請求路徑（后端文件的上傳地址）就可以將文件直接上傳到服務(wù)器。

文件上傳樣式設(shè)計(jì)

根據(jù)自己的需求設(shè)計(jì)一個(gè)文件樣式，這里我用虛擬邊框來顯示文件上傳區(qū)域。中間放個(gè)圖標(biāo)來觸發(fā)input選框，圖片文件上傳后就可以直接在當(dāng)前區(qū)域進(jìn)行預(yù)覽。

阻止自動(dòng)上傳并獲取文件

在el-upload中定義屬性:auto-upload="false" 可以禁止文件自動(dòng)上傳，既然禁止了自動(dòng)上傳那么我們就需要拿到文件對象。通過upload組件的on-change屬性我們可以監(jiān)聽文件添加、上傳時(shí)的狀態(tài)改變，利用該屬性觸發(fā)自定義事件可以獲取到需要的文件屬性。利用window.createObjectURL(e.raw)創(chuàng)建圖片地址實(shí)現(xiàn)本地預(yù)覽，如果fileList長度大于0說明已經(jīng)上傳了圖片這時(shí)我們就通過clearValidate去掉校驗(yàn)提示。

表單和圖片上傳

有文件的form表單上傳數(shù)據(jù)要用formData類型，我們需要?jiǎng)?chuàng)建一個(gè) FormData 對象來接收文件數(shù)據(jù)。選擇了圖片并填寫必填信息之后點(diǎn)擊【注冊】按鈕發(fā)起注冊請求，在register 方法里把表單信息通過append將數(shù)據(jù)添加到formData中。然后利用axios向后臺(tái)發(fā)起注冊請求并發(fā)送注冊信息，res為返回的請求結(jié)果。

總結(jié)：

這里主要是多了圖片的手動(dòng)上傳，el-upload組件默認(rèn)會(huì)自動(dòng)上傳提交的文件。這里要求圖片不允許自動(dòng)上傳，需要和信息一起在提交的時(shí)候進(jìn)行傳遞。以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)085：el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：