详解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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Python模拟三级菜单效果
2017/09/11 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python之语音识别speech模块
2020/09/09 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
班组长工作职责
2013/12/25 职场文书
党员评议思想汇报
2014/10/08 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript