element表单校验

最新推荐文章于 2024-08-02 00:06:19 发布

XGTX1998

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量123

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44950078/article/details/121139356

版权

1、在数据区为每一个数据分别定义校验规则

2、通过rules将校验规则注入el-form：

3、为每一个el-form-item通过prop指定校验规则

4、在表单提交的时候进行一次表单校验

例：用户名密码登录页面表单校验

<template>
  <div>
  <el-form ref="form" :model="user"
          label-width="80px" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
    <el-form-item align="left">
      <el-button type="primary" @click="handleSubnit">登录</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user:{
        username:"",
        password:""
      },
      formRules:{
        username:[
          {required:true,message:"用户名不能为空",trigger:"blur"},
          {min:3,max:5,message:"用户长度在3-5个之间",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码不能为空",trigger:"blur"}
        ]
      }
    };
  },
  methods: {
    handleSubnit(){
      //发起登录请求前再次进行表单校验
      //先获取表单对象，然后执行校验方法
      this.$refs["form"].validate((valid)=>{
        //valid表示的时校验后的结果 TRUE校验成功 false校验失败
        if(valid){
          alert("校验通过");
        }else{
          alert("校验失败");
        }
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>