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，则终止程序。