关于elementui的表单规则校验和预验证，重置功能

提示：关于elementui的表单规则校验和预验证，重置功能

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码

<el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
  <el-form-item prop="username">
    <el-input type="text" v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-s-custom"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
  </el-form-item>
  <div class="login-form-button">
    <el-form-item>
      <el-button type="primary" @click="login">提交</el-button>
      <el-button @click="resetLoginForm">重置</el-button>
    </el-form-item>
  </div>
</el-form>

data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  }
  methods: {
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate((valid) => {
        console.log(valid)
      })
    }
  }

二、使用步骤

1.表单规则校验

代码如下（示例）：

1、el-form中添加 :model="loginForm"
2、data中配置loginFormRules，添加校验规则 
3、el-input 使用v-model="loginForm.username" 绑定数据

2.表单规则校验

1、el-form中添加 :rules="loginFormRules"
2、给重置button按钮，添加事件
3、el-form-item 添加props 校验名

3.表单重置

代码如下（示例）：

1、el-form中添加 ref="loginFormRef" 方便获取form对象
2、methods中配置resetLoginForm 方法，打印this，可以拿到vueComponents对象
在vueComponents实例对象下挂在这$ref对象，在这里你可以拿到loginFormRef对象，调用该对象下面的validate方法（写一个回调函数），对表单进行预校验

4.表单预校验

代码如下（示例）：

1、el-form中添加 ref="loginFormRef" 方便获取form对象
2、methods中配置login方法，打印this，可以拿到vueComponents对象
在vueComponents实例对象下挂在这$ref对象，在这里你可以拿到loginFormRef对象，