整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、為什么需要表單驗(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)，如年齡、價格等。
一致性驗(yàn)證：驗(yàn)證兩個或多個輸入字段的值是否一致，如密碼確認(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、錯誤提示：
<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)證。在提交表單時，會先調(diào)用validateForm函數(shù)進(jìn)行驗(yàn)證，如果驗(yàn)證通過則提交表單，否則提示錯誤信息。
四、常用的表單驗(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í)時驗(yàn)證：使用input或change事件實(shí)時驗(yàn)證用戶輸入，及時提醒用戶輸入錯誤。
提示友好：使用合適的提示方式，如文字提示、圖標(biāo)提示等，讓用戶易于理解和操作。
全局驗(yàn)證：在表單提交之前對整個表單進(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)！
ngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。AngularJS 表單和控件可以提供驗(yàn)證功能，并對用戶輸入的非法數(shù)據(jù)進(jìn)行警告。客戶端的驗(yàn)證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗(yàn)證也是必須的。簡單演示一下代碼如下
上述代碼運(yùn)行效果圖如下
HTML 表單屬性 novalidate 用于禁用瀏覽器默認(rèn)的驗(yàn)證。AngularJS ng-model 指令用于綁定輸入元素到模型中。模型對象有兩個屬性： user 和 email。我們使用了 ng-show指令， color:red 在郵件是 $dirty 或 $invalid 才顯示。
表單無數(shù)據(jù)時就會有紅色的提示效果圖如下
是一個注冊需求，要求用戶在注冊的時候需要填寫注冊信息并上傳“營業(yè)執(zhí)照”等信息。表單內(nèi)容需進(jìn)行驗(yàn)證及必填項提示，圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽。既然是注冊我們當(dāng)然是用form表單來提交了，對應(yīng)的ElementUI組件標(biāo)簽則是el-form。
從上面的圖可以看出注冊環(huán)節(jié)分為了兩部分?jǐn)?shù)據(jù)，左邊是注冊時需求提交的表單信息，右邊是需求上傳的圖片。先來解決左邊的表單數(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)的屬性值。
input的name屬性是用來定義input元素的名稱，只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。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)等信息。
ElementUI提供了表單驗(yàn)證的規(guī)則，可以通過rules屬性來定義對應(yīng)el-form-item中的驗(yàn)證規(guī)則（支持多個規(guī)則驗(yàn)證）。當(dāng)然如果覺得ElementUI提供的表單驗(yàn)證功能無法滿足項目需求我們也可以自定義驗(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ù)直接使用。
ElementUI提供了一個封裝好的<input type='file'>的上傳組件el-upload，封裝了文件上傳的一系列鉤子函數(shù)，可以監(jiān)聽文件上傳過程中的所有事件。el-upload連請求也封裝了，只要通過action提供請求路徑（后端文件的上傳地址）就可以將文件直接上傳到服務(wù)器。
根據(jù)自己的需求設(shè)計一個文件樣式，這里我用虛擬邊框來顯示文件上傳區(qū)域。中間放個圖標(biāo)來觸發(fā)input選框，圖片文件上傳后就可以直接在當(dāng)前區(qū)域進(jìn)行預(yù)覽。
在el-upload中定義屬性:auto-upload="false" 可以禁止文件自動上傳，既然禁止了自動上傳那么我們就需要拿到文件對象。通過upload組件的on-change屬性我們可以監(jiān)聽文件添加、上傳時的狀態(tài)改變，利用該屬性觸發(fā)自定義事件可以獲取到需要的文件屬性。利用window.createObjectURL(e.raw)創(chuàng)建圖片地址實(shí)現(xiàn)本地預(yù)覽，如果fileList長度大于0說明已經(jīng)上傳了圖片這時我們就通過clearValidate去掉校驗(yàn)提示。
有文件的form表單上傳數(shù)據(jù)要用formData類型，我們需要創(chuàng)建一個 FormData 對象來接收文件數(shù)據(jù)。選擇了圖片并填寫必填信息之后點(diǎn)擊【注冊】按鈕發(fā)起注冊請求，在register 方法里把表單信息通過append將數(shù)據(jù)添加到formData中。然后利用axios向后臺發(fā)起注冊請求并發(fā)送注冊信息，res為返回的請求結(jié)果。
這里主要是多了圖片的手動上傳，el-upload組件默認(rèn)會自動上傳提交的文件。這里要求圖片不允許自動上傳，需要和信息一起在提交的時候進(jìn)行傳遞。以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)085：el-form實(shí)現(xiàn)表單和圖片手動上傳和校驗(yàn)】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：
為了方便學(xué)習(xí)，下面附上本文用到的源碼：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
