element-plus表单校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-plus表单校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、实现表单输入校验

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表单项上需要表明跟哪个参数去校验

element plus 表单验证,测试开发,前端,servlet,javascript

文章来源地址https://www.toymoban.com/news/detail-672996.html

element plus 表单验证,测试开发,前端,servlet,javascript

二、表单预校验

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

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

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

element plus 表单验证,测试开发,前端,servlet,javascript

<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>

到了这里，关于element-plus表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！