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


Posted in Javascript onJune 21, 2017

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.查看效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
详解vue-cli中配置sass
Jun 21 #Javascript
详解如何在vue中使用sass
Jun 21 #Javascript
You might like
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
session 的生命周期是多长
2006/10/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python之生成多层json结构的实现
2020/02/27 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
医学生自荐信
2013/12/03 职场文书
个人收入证明范本
2014/01/12 职场文书
运动会稿件200字
2014/02/07 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
学习雷锋标语
2014/06/25 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL