当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解ElementUI之表单验证、数据绑定、路由跳转

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

众鑫丝案件,纨绔十三少,极光网络电视

1.新建表单组件el-form.vue

<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>

2.新建一个module,eleuserinfo.js

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"});
    }
  }
}

3.我们把jssrc/index.js 中的代码分离出一部分

config.js

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"},
    ]}
  ]
})

4.然后jssrc/index.js 修改成如下

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,
});

5.查看效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网