整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JavaScript實(shí)現(xiàn)表單驗(yàn)證

          JavaScript實(shí)現(xiàn)表單驗(yàn)證

          、為什么需要表單驗(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)!

          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 指令用于綁定輸入元素到模型中。模型對象有兩個(gè)屬性: user 和 email。我們使用了 ng-show指令, color:red 在郵件是 $dirty 或 $invalid 才顯示。

          表單無數(shù)據(jù)時(shí)就會(huì)有紅色的提示效果圖如下

          是一個(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í),下面附上本文用到的源碼:


          主站蜘蛛池模板: 国产精品一区三区| 中日韩一区二区三区| 精品无码中出一区二区| 好吊视频一区二区三区| 夜精品a一区二区三区| 久久福利一区二区| 国产精品成人免费一区二区 | 日韩美一区二区三区| 99久久精品费精品国产一区二区| 午夜DV内射一区区| 免费播放一区二区三区| 九九久久99综合一区二区| 一区二区三区在线免费| 免费萌白酱国产一区二区| 亚洲丶国产丶欧美一区二区三区| 国产无线乱码一区二三区| 亚洲国产精品一区二区第一页免| 国产麻豆媒一区一区二区三区| 亚洲日韩精品国产一区二区三区| 91在线精品亚洲一区二区| 久久精品岛国av一区二区无码| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 精品国产亚洲一区二区三区在线观看| 久久久精品人妻一区二区三区蜜桃 | 国产成人一区二区三区免费视频 | 精产国品一区二区三产区| 韩日午夜在线资源一区二区| 99久久人妻精品免费一区| 人妻夜夜爽天天爽爽一区| 一区二区三区国产精品| 亚洲日本乱码一区二区在线二产线 | 在线精品视频一区二区| 中文字幕乱码人妻一区二区三区 | 精品中文字幕一区在线| 色多多免费视频观看区一区| 精彩视频一区二区| 无人码一区二区三区视频| 久久91精品国产一区二区| 亚洲乱码av中文一区二区| 无码人妻精品一区二区三区不卡| 一区二区三区日本电影|