Element表单校验补充

我们尝试通过一个案例对Element的表单校验进行一下补充

实现表单基本结构

创建项目

$ vue create login

选择babel / eslint

安装Element

开发时依赖 ： 开发环境所需要的依赖 -> devDependencies

运行时依赖: 项目上线依然需要的依赖 -> dependencies

$ npm i element-ui

在main.js中对ElementUI进行注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

接下来,利用Element组件完成如图的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K8vYTF7n-1613739094816)(assets/image-20200906184428291.png)]

代码如下

<template>
  <div id="app">
    <!-- 卡片组件 -->
    <el-card class='login-card'>
      <!-- 登录表单 -->
      <el-form style="margin-top: 50px">
        <el-form-item>
          <el-input placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%">登录</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
    
  name: 'App',
  components: {
    

  }
}
</script>

<style>
 #app {
    
   width: 100%;
   height: 100vh;
   background-color: pink;
   display: flex;
   justify-content