3.3　登錄表單數據進行合法性驗證

接下來進入登錄的前后端交互處理，從客戶端提交用戶名和密碼，登錄成功可獲取token信息。

登錄功能實現步驟如下。

（1）對客戶端提交的表單數據進行合法性驗證。

（2）調用API，實現數據交互。

（3）實現本地存儲，保存token信息。

下面實現第（1）步，即對表單數據進行合法性驗證，需要驗證用戶名、密碼文本框和登錄按鈕。

首先驗證用戶名和密碼是否合法，并且字符串的長度為6～15位，Element Plus提供了完整的驗證規則，數據層示例代碼如下。

視圖層示例代碼如下。

代碼解析：

為el-form添加ref、:model、:rules屬性，其中ref屬性用于獲取表單DOM元素，:model屬性用于設置用戶名和密碼的數據源，:rules屬性用于設置驗證規則。

打開登錄頁面，當用戶名為空，密碼為123時，驗證結果如圖3-3所示。

至此，驗證用戶名和密碼是否合法已經完成。接下來是對“登錄”按鈕的驗證，即當用戶單擊“登錄”按鈕時，首先觸發驗證規則，所有的驗證規則通過進入第（2）步調用API實現數據交互，登錄驗證示例代碼如下。

代碼解析：

單擊“登錄”按鈕調用loginHandle()方法，在loginHandle()方法中調用form表單提供的validate()方法對整個表單數據進行校驗，當所有的驗證規則通過，isValid的值為true；只要有一個驗證規則不通過，isValid的值均為false。上述代碼表示如果isValid的值為false，則終止程序。