详解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 高亮显示文本中重要的关键字
Dec 24 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue-lazyload使用总结(推荐)
Nov 01 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP入门速成(2)
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php中使用sftp教程
2015/03/30 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
数百万免费的图形资源:Freepik
2020/09/21 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
公司寄语大全
2014/04/10 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
节约用电通知
2015/04/25 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技