vue组件表单数据回显验证及提交的实例代码


Posted in Javascript onAugust 30, 2018

最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现。

vue组件表单数据回显验证及提交的实例代码

vue组件表单数据回显验证及提交的实例代码

代码如下:

<template>
 <div class="index">
 <!--header-bar></header-bar-->
 <div style="margin:20px;">
 <div class="item">
 <p>住户名称:</p>
 <p>
  <input type="text" value="username" v-model="formStatus.username" placeholder="输入名称">
 </p>
 </div>
 <div class="item">
 <p>住户类型:</p>
 <p>
  <label v-for="(item, index) in zhuhuType">
  <span>{{item.name}}</span>
  <input type="radio" name = "zhuhutype" :value="item.id" :checked="item.isChecked" @click="changeZh(index)" v-model="formStatus.zhuhuType">
  </label>
 </p>
 </div>
 <div class="item">
 <p>设备名称:</p>
 <p>
  <label v-for="(item, index) in shebeiType">
  <span>{{item.name}}</span>
  <input type="checkbox" :value="item.id" :checked="item.isChecked" @click="changeSb(index)" v-model="formStatus.shebeiType">
  </label>
 </p>
 </div>
 <div class="item">
 <p>住户大小:</p>
 <p>
  <select v-model="formStatus.zhuhudaxiao">
  <option value="0">请选择</option>
  <option v-for="option in zhuhudaxiao" v-model="zhuhudaxiao" :id = "option.id" :value="option.value" >{{option.name}}</option>
  </select>
 </p>
 </div>
 <div class="item">
 <p>住户留言:</p>
 <p>
  <textarea value="userword" v-model="formStatus.userword"></textarea>
 </p>
 </div>

 </div>
 <p style="margin:20px 0;"><button @click="save">点击保存</button></p>
 </div>
</template>
<script>
 import Vue from 'vue'
 import axios from 'axios';
 import ElementUI from 'element-ui'
 import URL from '../utils/Tools/URL.js'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)
 import headerBar from '../modules/headerBar.vue';
 export default {
 name: 'index',
 data (){
 return {
 zhuhuType: [],
 shebeiType: [],
 zhuhudaxiao: [],
 //绑定改变后的表单值用于提交
 formStatus: {
  username: "",
  zhuhuType: 43,
  shebeiType: [52, 23],
  zhuhudaxiao: "",
  userword: ""
 }
 }
 },
 components: { headerBar },
 methods: {
 getPage (currentPage){
 console.log(currentPage);
 // this.$http.get("http://192.168.1.200/test.php").then(res=>{
 // console.log(res.data);
 // });
 },
 handleEdit(index, row) {
 console.log(index, row);
 },
 handleDelete(index, row) {
 console.log(index, row);
 },
 save(){
 if(this.formStatus.username == ""){
  alert("输入名称");
  return false;
 }
 console.log(typeof(this.formStatus.zhuhuType));
 if(typeof(parseInt(this.formStatus.zhuhuType)) != "number"){
  alert("输入住户类型");
  return false;
 }
 if(this.formStatus.shebeiType.length == 0 ){
  alert("输入设备名称");
  return false;
 }
 if(this.formStatus.zhuhudaxiao == 0){
  alert("选择住户大小");
  return false;
 }
 if(this.formStatus.userword == ""){
  alert("输入用户留言");
  return false;
 }

 console.log(this.formStatus);
 console.log("####用户名称####");
 console.log(this.formStatus.username);

 console.log("####住户类型####");
 console.log(this.zhuhuType);

 console.log("####设备名称####");
 console.log(this.shebeiType);

 console.log("####住户大小####");
 console.log(this.userDxselected);

 console.log("####用户留言####");
 console.log(this.userword);
 },
 //住户类型改变数据
 changeZh(index){
 this.zhuhuType.forEach(function(value, index){
  value.isChecked = false;
 });
 this.zhuhuType[index].isChecked = true;
 },
 //设备选择改变数据
 changeSb(index){
 console.log(index);
 this.shebeiType[index].isChecked = !this.shebeiType[index].isChecked;
 }
 },
 created () {
 console.log("############");
 //用户名称
 this.formStatus.username = "用户名称返回的内容";

 //循环住户类型
 this.zhuhuType = [{
 name: '小型住户',
 id: '12',
 isChecked: false
 },{
 name: '中型住户',
 id: '43',
 isChecked: false
 },{
 name: '大型住户',
 id: '72',
 isChecked: true
 },{
 name: '超大型住户',
 name: '设备6',
 id: '25',
 isChecked: false
 }];

 //循环设备名称
 this.shebeiType = [{
 name: '设备1',
 id: '22',
 isChecked: true
 },{
 name: '设备2',
 id: '23',
 isChecked: false
 },{
 name: '设备3',
 id: '52',
 isChecked: true
 },{
 name: '设备6',
 id: '65',
 isChecked: false
 }];

 //住户大小
 this.zhuhudaxiao = [{
 name: "100平米",
 id: 1,
 value: 1
 },{
 name: "80平米",
 id: 2,
 value: 2
 },{
 name: "70平米",
 id: 3,
 value: 3
 }];

 //住户大小
 this.formStatus.zhuhudaxiao = 2;
 //用户名称
 this.formStatus.userword = "用户留言返回的内容";
 // axios.get("/test.php").then(res=>{
 // this.table = this.table.concat(res.data.data);

 // console.log(res.data);
 // });
 }
 }
</script>
<style>
 select{height:40px;width:100px;}
 .el-button--mini, .el-button--mini.is-round{}
 *{margin:0;padding:0;font-family:"微软雅黑";}
 button{height:40px;width:100px;margin-left:20px;}
 .item p{padding:10px 0;}
 .table, .page{
 width:900px;
 height:auto;
 margin:20px auto;
 }
 label{
 padding:10px 20px;
 margin:10px;
 border:1px solid #eee;
 }
 body{padding-top:80px;}
 .header{
 position:fixed;
 top:0;
 width:100%;
 background:#eee;
 }
 .header ul{
 height:80px;
 width:1000px;
 }
 .header ul li{
 float:left;
 width:200px;
 font-size:14px;
 line-height:80px;
 text-align:Center;
 }
 .header ul li a{
 display:block;
 }

</style>
Javascript 相关文章推荐
jQuery jcrop插件截图使用方法
Nov 20 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
详解Python 切片语法
2019/06/10 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
华为慧通笔试题
2016/04/22 面试题
优秀团队获奖感言
2014/02/19 职场文书
小学生开学感言
2014/02/28 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
2015年党员自评材料
2014/12/17 职场文书
2014年优秀党员材料
2014/12/18 职场文书
建国大业观后感
2015/06/01 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python