详解ElementUI之表单验证、数据绑定、路由跳转

<template>  <div class="form">    <el-form ref="form" :model="UserForm" :rules="this.$store.state.userinfo.CheckRules" label-position="left" label-width="180px">      <el-form-item label="真实姓名" prop="truename">        <el-input v-model="UserForm.truename"></el-input>      </el-form-item>      <el-form-item label="年龄" prop="age">        <el-input v-model="UserForm.age"></el-input>      </el-form-item>      <el-form-item label="出生年月">        <el-date-picker type="date" placeholder="选择日期"                v-model="UserForm.birthday">        </el-date-picker>      </el-form-item>      <el-form-item>        <el-button type="primary" @click="submitInfo">提交</el-button>      </el-form-item>    </el-form>  </div></template><style>  .form{margin-top: 20px;}</style><script>  export default {    created(){      this.UserForm = this.$store.state.userinfo.UserForm;    },    beforeDestory(){      this.$store.state.userinfo.UserForm=this.UserForm;    },    data() {      return {        UserForm: {          truename: '',          age: '',          birthday: ''        }      };    },    methods:{      submitInfo(){        // 表单验证方法        this.$refs.form.validate(function (result) {          if(result){            // 验证通过,调用module里的setUserInfo方法            this.$store.dispatch("setUserInfo");          }else{            alert("表达验证不合法")          }        }.bind(this));      }    },  }</script>

import Vue from "vue";import {routerConfig} from "./../../jssrc/config";export default{  state:{    UserForm:{truename:"", age:"", birthday:""},    CheckRules:{      truename:[        {required:true, message:"请输入活动名称", trigger:'blur'},        {min:3, max:5, message:"必须3-5个字符", trigger:'blur'}      ],      age:[{validator:(rule,value,callback)=>{        if(/^/d+$/.test(value) == false){          callback(new Error("年龄只能输入数字"));        }else{          callback();        }      }, trigger:'blur'}]    },  },  actions:{    setUserInfo(context){      // 路由跳转      routerConfig.push({name:"newslist"});    }  }}

import VueRouter from 'vue-router';import newsdetail from "./../components/news-detail.vue";import eltable from "./../components/el-table.vue";import elindex from "./../components/elmentui/el-index.vue";import elhot from "./../components/elmentui/el-hot.vue";import eluserinfo from "./../components/elmentui/el-form.vue";const userlogin = resolve => {  // 成功之后的回调  resolve(require("./../components/user-login.vue")); // 这就是异步加载的方式}const newslist = resolve => {  // 成功之后的回调  resolve(require("./../components/news-list.vue")); // 这就是异步加载的方式}// 路由模块export const routerConfig = new VueRouter({  routes: [    { path: '/', component: userlogin},    { path: '/news', component: newslist, name:"newslist"},    { path: '/news/:newsid', component: newsdetail, name:"newsdetail"},    { path: '/login', component: userlogin,name:"userlogin" },    { path: '/eltable', component: eltable,name:"eltable" },    { path: '/elindex', component: elindex,name:"elindex", children:[      {path:"hot",component:elhot,name:"elhot"},      {path:"userinfo",component:eluserinfo,name:"eluserinfo"},    ]}  ]})

import Vue from "vue";import pagenav from "./../components/page-nav.vue";// 引入import validate from "./../components/validate";// 使用Vue.use(validate);import VueRouter from 'vue-router';Vue.use(VueRouter); // 全局使用插件import VueResource from 'vue-resource';Vue.use(VueResource);import UserModule from "./../store/modules/UserModule";import NewsModule from "./../store/modules/NewsModule";import EleModule from "./../store/modules/eleModule";import EleUserInfomoldule from "./../store/modules/EleUserInfo";import Vuex from 'vuex';Vue.use(Vuex);import ElementUI from 'element-ui';import 'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);const vuex_store = new Vuex.Store({  modules:{    users:UserModule,    news:NewsModule,    ele:EleModule,    userinfo:EleUserInfomoldule  }})//路由的配置import {routerConfig} from "./config";// 全局组件,不加入路由管理Vue.component("page-nav",pagenav);let myvue = new Vue({  el:".container",  store:vuex_store, //注入到vue  router:routerConfig,});