element-plus表单校验

最新推荐文章于 2026-03-22 20:54:44 发布

原创最新推荐文章于 2026-03-22 20:54:44 发布 · 7.3k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #servlet #javascript

测试开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用Element Plus组件库中的el-form组件实现表单输入校验，并通过登录示例展示了表单预校验的方法及后端登录请求的处理。

一、实现表单输入校验

el-form标签上定义rules属性进行双向绑定 :rules="loginRules" ，loginRules这个校验规则定义在data数据里，（1）要注意的是loginRules里面定义username和password需要与表单数据绑定的参数同名。（2）username: [{ required: true, message: '账号不能为空哦', trigger: 'blur' }] ，其中required校验必填不必填，message是提示信息，trigger:'blur'是失去焦点后就去校验数据
el-form-item 定义 prop="username" ，每一个el-form-item表单项上需要表明跟哪个参数去校验

二、表单预校验

在el-form表单标签上添加代码 ref="loginRef"

methods里面，点击登录调用的方法clickLogin()里面，先获取登录的表单对象 this.$refs['loginRef'] ，然后把表单校验的结果传给validate里面的回调函数res。

clickLogin() {
      //获取登录的表单对象
      this.$refs['loginRef'].validate((res) => {
        if (res) {
          // 调用后端登录的结果
          this.loginRequest()
        }
      })
    },

<script>
import LoginBack from '../components/LoginBack.vue'
import { ElMessage } from 'element-plus'

export default {
  data() {
    return {
      // 登录表单数据
      loginForm: {
        username: '',
        password: '',
        status: false,
      },
      // 登录数据的校验规则
      loginRules: {
        username: [{ required: true, message: '账号不能为空哦', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空哦', trigger: 'blur' }],
      },
    }
  },
  methods: {
    clickLogin() {
      //获取登录的表单对象
      this.$refs['loginRef'].validate((res) => {
        if (res) {
          // 调用后端登录的结果
          this.loginRequest()
        }
      })
    },

    async loginRequest() {
      // 调用登录接口 发送请求进行登录
      const response = await this.$api.loginApi(this.loginForm)
      if (response.status === 200) {
        this.$router.push({ name: 'allProject' })
        ElMessage({
          message: '登录成功',
          type: 'success',
        })
      } else {
        ElMessage({
          message: response.data,
          type: 'warning',
        })
      }
    },
  },
  components: {
    LoginBack,
  },
}
</script>

<style scoped>
.login_box {
  width: 500px;
  height: 400px;
  margin: calc((100vh - 400px) / 2) auto;
}

.title {
  padding-bottom: 5px;
  text-align: center;
}
</style>