VUE用Element组件完成表单验证

Element官网：element.eleme.cn/#/zh-CN/com…

操作步骤：

第一步：

命令窗口中在项目地址下：

输入npm i element-ui -S 安装elementui 依赖

第二步：

第三步：

复制代码

下面进行我们的表单验证：

注意：

<!-- :rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则  -->
<!-- ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如：validate校验方法 resetFields重置方法  -->
<!-- status-icon 是在表单校验错误的时候 输入框中出现的提示小图标-->
<!-- label-width="200px" 是用来控制用户名和密码文本的宽度  -->

router下index.js文件配置路由：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'regis',

    component:()=>import('@/views/RegisView.vue')

  },

\

]

const router = new VueRouter({

  routes

})

export default router

App.vue引用：

在views文件下编写RegisView.vue文件：

.myform {   width: 600px;   margin: 50px auto; }

★☆千万别忘记使用Element一定要全局main.js里面写入

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

最终效果