详解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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JS实现调用本地摄像头功能示例
May 18 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
一段php加密解密的代码
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
详解Vue之事件处理
2020/07/10 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
项目申请汇报材料
2014/08/16 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS