使用方法

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

具体使用过程

1.在el-form中设置ref

<el-form ref="loginFormRef" >

2.为登录按钮添加事件

<el-button type="primary" @click="login">登录</el-button>

3.去methods中加入事件方法。

login(){
        //validate方法进行表单预验证,valid参数表示表单是否通过验证，通过为true,不通过为false
        this.$refs.loginFormRef.validate(async valid => {
          console.log(valid)
          //判断valid是否为true,如果为true执行以下操作,如果为false，则不发起请求
          if(!valid) return;
          //通过$http.post发起请求login 为请求路径，后面的为请求需要携带的参数，其返回值为promise对象包含的数据很多
          // 通过await简化promise,awai只能用在async修饰的方法中，返回的是具体的响应对象data{},其中有六个属性都是axios封装好的，属性中只有data属性是服务器返回的真实数据。
          const res =await this.$http.post('login',this.loginForm);
          // console.log(res.data.meta.status)
          //通过判断服务器响应的status,
          if (res.data.meta.status!=200) return this.$message.error('登录失败');
          this.$message.success('登录成功')
        });
      }

4.其中需要用到axios,message消息提示，具体详情请看vue中axios的使用，vue中消息提示的使用

原文链接：https://blog.csdn.net/m0_51459514/article/details/123738315