ElementUI实现表单校验

步骤

1.给表单el-form添加校验规则字段rules并动态绑定一个对象（对象可自定义，我这里定义为rules）
2.在script里面加入rules对象，并将要校验的字段写进去，格式固定

#eg：message的值可以自定义，blur表示表单失去焦点触发校验
username:[{required:true,message:'请输入用户名',trigger:'blur'}],

3.添加prop属性，在对应的el-form-item标签上我们让prop等于rules里面对应的字段值
上述三步操作表单校验功能已经有了，如果想添加点击事件，通过提交来向用户显示校验结果，我们可以继续执行以下步骤：
4.给el-form添加ref属性，属性值可自定义，例如loginForm
5.给button按钮添加一个点击事件
6.在methods方法里面实现点击事件
7.通过this.$refs.loginForm.validate()处理校验结果（loginForm是第四步中的属性值）

代码详情

<template>
  <div>
  
  
  
  
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
    <h3 class="loginTitle">系统登录h3>
    
    
    <el-form-item prop="username">
      <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">el-input>
    el-form-item>
    <el-form-item prop="password">
      <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入用密码">el-input>
    el-form-item>
    
      <el-button type="primary" style="width: 100%" @click="submitLogin">登录el-button>
    el-form>
  div>
template>
<script>
    export default {
        name: "Login",
        data(){
          return {
            loginForm: {
              username: 'admin',
              password: '123',
            },
            //2.我们把要进行验证的字段都放进rules对象里
            rules:{
              username:[{required:true,message:'请输入用户名',trigger:'blur'}],
              password:[{required:true,message:'请输入密码',trigger:'blur'}],
            }
          }
        },
      methods:{
          //6.点击事件
          submitLogin() {
          //7.
          //这里refs.后面的loginForm与el-form表单中的ref属性值是对应的
          //validate：对整个表单进行校验的方法，参数为一个回调函数。这里给了一个返回值valid，为Boolean类型，表示校验是否成功
          
            this.$refs.loginForm.validate((valid)=>{
              if (valid){
                this.$message({
                  message: '登录成功！',
                  type: 'success'
                });
              }else{
                this.$message.error('登录失败！')
                return false;
              }
            })
          }
      }
    }
script>
<style scoped>
.loginContainer{
  border-radius:15px ;
  background-clip:padding-box ;
  margin: 180px auto;
  padding: 15px 35px;
  background: white;
  border: 1px solid #eaeaea;
  box-shadow:0 0 25px #cac6c6 ;
  width: 350px;

}
  .loginTitle{
    margin: 2px auto 20px auto;
    text-align: center;
  }
  .rememberMe{
    width: 100%;
    margin: 9px auto;
  }
style>