JavaScript表單驗(yàn)證實(shí)現(xiàn)過(guò)程詳解

更新時(shí)間：2023年01月30日 10:43:52 作者：斯沃福德

表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過(guò)一定的規(guī)則來(lái)確保用戶(hù)提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下

一. 作用

如果沒(méi)有表單驗(yàn)證，錯(cuò)誤的數(shù)據(jù)就會(huì)發(fā)往服務(wù)端，會(huì)造成服務(wù)端壓力過(guò)大；

所以在前端對(duì)數(shù)據(jù)進(jìn)行過(guò)濾，以減輕服務(wù)端壓力；

二. 需求

1. 當(dāng)輸入框失去焦點(diǎn)時(shí)，驗(yàn)證輸入內(nèi)容是否符合要求-----onblur

當(dāng)用戶(hù)名符合要求后，要隱藏提示信息?。╠isplay=”none”）

2. 點(diǎn)擊注冊(cè)按鈕時(shí)，判斷所有輸入框的內(nèi)容是否符合要求，如果不符合則阻住表單提交–onsubmit

三. 實(shí)現(xiàn)

需求一：

HTML：

action=# 即提交到當(dāng)前頁(yè)面，表單提交的方式是 get；

style="display:none" 會(huì)隱藏提示信息，所以當(dāng)用戶(hù)名密碼不符合要求時(shí)，只需要修改 display屬性即可讓提示信息分情況顯示；

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>注冊(cè)頁(yè)面</title>
	</head>
	<!-- css添加背景圖片-->
	  <style>
	    body{
	      background-image: url("3.jpg");
	      background-repeat:no-repeat;
	    }
	  </style>
	<body>
	<h2>
	  歡迎注冊(cè)！
	</h2>
	<!--表單-->
	<form id="reg-from" action="#" method="get">
	  <table>
	    <tr>
	      <td class="inputs">用戶(hù)名：</td>
	      <td>
	        <input name="username" type="text" id="username">
	        <br>
	        <!-- 錯(cuò)誤提示信息      -->
	        <span id="username_err" class="err_msg" style="display:none">用戶(hù)名不合法</span>
	        <!-- 未來(lái)通過(guò)更改span的display屬性來(lái)控制提示信息   -->
	      </td>
	    </tr>
	    <tr>
	      <td>密碼：</td>
	      <td class="inputs">
	        <input name="password" type="password" id="password">
	        <br>
	        <!-- 錯(cuò)誤提示信息      -->
	        <span id="password_err" class="err_msg" style="display:none">密碼不合法</span>
	      </td>
	    </tr>
	  </table>
	  <br>
	  <input type="submit" name="submit" value="提交注冊(cè)">
	</form>
	<!-- 外連script！   -->
	<script src="testing.js"></script>
	</body>
	</html>

注意：

外連script 要放在后面，否則無(wú)法提前獲取到Element對(duì)象，就無(wú)法更改display屬性；

JavaScript：

1.主要思路就是根據(jù)id 獲取到Element對(duì)象，

2.然后使用對(duì)象的 onblur 事件綁定函數(shù)，

3.在函數(shù)內(nèi)進(jìn)行判斷，并更改Element對(duì)象的display屬性；

// 1.驗(yàn)證用戶(hù)名是否合理
// 1.1 根據(jù)id 獲取用戶(hù)名的輸入框的Element對(duì)象
    var username=document.getElementById("username");
// 1.2 綁定Element對(duì)象的onblur屬性！ 設(shè)置鼠標(biāo)失去焦點(diǎn)時(shí) 要發(fā)生的事件
    username.onblur=function(){
// 1.3 獲取用戶(hù)的輸入名（Element對(duì)象的value屬性）
        let usernameInput=username.value.trim();  //去掉空格
// 1.4 判斷用戶(hù)名是否是6~12位
        if(usernameInput.length>=6 && usernameInput.length<=12){
            // 用戶(hù)更改username后，符合規(guī)則時(shí)將display屬性置為null
            document.getElementById("username_err").style.display="none";
        }else{
            //不符合則修改 span標(biāo)簽中的style="display"屬性為空字符串即可顯示提示信息！
            document.getElementById("username_err").style.display='';
        }
    }
// 使用 Ctrl+r 替換username為password
// 2.驗(yàn)證密碼是否合理
//2.1 根據(jù)id 獲取密碼的輸入框?qū)ο?
    var passwordObj=document.getElementById("password");
// 2.2 綁定對(duì)象的onblur屬性！ 設(shè)置鼠標(biāo)失去焦點(diǎn)時(shí) 要發(fā)生的事件
    passwordObj.onblur=function(){
// 2.3 獲取用戶(hù)的輸入密碼
        var passwordInput=passwordObj.value.trim();// input中value就是用戶(hù)的輸入，trim()去掉空格
// 2.4 判斷密碼是否是6~12位
        if(passwordInput.length>=6 && passwordInput.length<=12){
            //password，符合規(guī)則時(shí)將display屬性置為null
           document.getElementById("password_err").style.display="none";
        }else{
            //不符合，則修改 span標(biāo)簽中的style="display"屬性為空字符串即可顯示 ！
           document.getElementById("password_err").style.display="";
        }

運(yùn)行效果：

需求二：

函數(shù)的邏輯是：

用戶(hù)名和密碼同時(shí)滿(mǎn)足則返回true 即可以提交，否則返回false 不能提交信息到服務(wù)端！

需要改造需求一中的方法，將匿名函數(shù)改為單獨(dú)的函數(shù)，并在表單驗(yàn)證時(shí)調(diào)用；

JavaScript：

更改用戶(hù)名和密碼部分：

// 1.驗(yàn)證用戶(hù)名是否合理
// 1.1 根據(jù)id 獲取用戶(hù)名的輸入框?qū)ο?
    var usernameObj=document.getElementById("username");
// 1.2 綁定對(duì)象的onblur屬性！ 設(shè)置鼠標(biāo)失去焦點(diǎn)時(shí) 要發(fā)生的事件
    usernameObj.onblur=checkUsername;
    // js函數(shù)名是一個(gè)引用，不加小括號(hào)相當(dāng)于屬性賦給引用，不會(huì)立即調(diào)用
    function checkUsername(){
    //  獲取用戶(hù)的輸入名
        let usernameInput=usernameObj.value.trim();// input中value就是用戶(hù)的輸入，trim()去掉空格
        //判斷 是否是6~12位
        //提出判斷的結(jié)果為一個(gè)變量flag
        let flag=usernameInput.length>=6 && usernameInput.length<=12;
        if(flag){
            // 符合
            // 如果后續(xù)更改為符合要求的用戶(hù)名，則要隱藏提示信息！
           document.getElementById("username_err").style.display="none";
        }else{
            //不符合，則修改 span標(biāo)簽中的style="display"屬性為空字符串即可顯示 ！
           document.getElementById("username_err").style.display="";
        }
        return flag; // 返回值便于給onsubmit使用
    }
// 使用 Ctrl+r 替換username為password
// 2.驗(yàn)證密碼是否合理
//2.1 根據(jù)id 獲取密碼的輸入框?qū)ο?
    var passwordObj=document.getElementById("password");
// 2.2 綁定對(duì)象的onblur屬性！ 設(shè)置鼠標(biāo)失去焦點(diǎn)時(shí) 要發(fā)生的事件
    passwordObj.onblur=checkPassword;
    function checkPassword(){
    //  獲取用戶(hù)的輸入密碼
        let passwordInput=passwordObj.value.trim();// input中value就是用戶(hù)的輸入，trim()去掉空格
        //判斷 是否是6~12位
        let flag=passwordInput.length>=6 && passwordInput.length<=12;
        if(flag){
            // 符合
            // 如果后續(xù)更改為符合要求的密碼，則要隱藏提示信息！
           document.getElementById("password_err").style.display="none";
        }else{
            //不符合，則修改 span標(biāo)簽中的style="display"屬性為空字符串即可顯示 ！
           document.getElementById("password_err").style.display="";
        }
        return flag;
    }

表單驗(yàn)證！

// 表單驗(yàn)證
// 1.獲取form表單的對(duì)象，而不是 submit的對(duì)象！
    var regFormObj=document.getElementById("reg-form");
// 2.綁定對(duì)象的onsubmit屬性，返回false則阻止提交
    regFormObj.onsubmit=function(){
    // 逐個(gè)判斷表單項(xiàng)是否符合要求，有一個(gè)不符合則返回false
    // 讓之前單獨(dú)判斷用戶(hù)名/密碼的 funtion可以被調(diào)用，且有返回值
    let flag=checkUsername() && checkPassword();
    if(!flag){
        alert("無(wú)法提交，請(qǐng)修改");
    }
    // 都滿(mǎn)足則返回給unsubmit為true； 有一個(gè)不滿(mǎn)足就返回false
    return flag;
}

運(yùn)行效果：

如果用戶(hù)名和密碼任一不滿(mǎn)足要求將無(wú)法提交：