本文主要介绍如何利用element搭建表单结构并进行表单的验证。

1.利用脚手架创建项目，执行vue ui命令，手动安装element组件，按需导入

创建完成后，在src下的plugins目录下有一个element.js文件，在其中按需引入需要的元素。内容如下所示：

import Vue from 'vue'
import {
    Button,
    Card,
    Form,
    FormItem,
    Input
} from 'element-ui'
 
Vue.use(Button)
Vue.use(Card)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

 2.利用元素搭建表单结构

<template>
  <div id="app">
      <el-card class="login">
        
        <el-form ref="loginForm" style="margin-top:50px" :model="loginForm" :rules="loginRules">
          <el-form-item prop="mobile">
            <el-input placeholder="请输入手机号" v-model="loginForm.mobile">el-input>
          el-form-item>
           <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="loginForm.password">el-input>
          el-form-item>
          <el-button type="primary" style="width:100%" @click="login">登录el-button>
        el-form>
      el-card>
  div>
template>

 样式如下：

<style scoped>
#app{
  width: 100%;
  height: 100%;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login{
  width: 440px;
  height: 330px;
  background-color: white;
}
style>

 3.表单验证功能

(1) el-form中绑定model和rules,model绑定data中的对象，包含的是要检验的几个属性。rules绑定data中的对象，包含要检验的属性对应的具体规则。

（2）el-form-item中prop赋值要检验的属性 

(3)  el-input中双向绑定要检验的属性 

在script中定义手机号和密码的校验规则。

最后，为登录按钮绑定事件，规定登录成功与否及对应的后续操作。可通过两种方式进行校验。

（1）直接通过validate中的参数进行判断

(2) 通过validate所返回的promise对象进行校验