版权声明:转载请关注我的公众号-青儿创客基地 https://blog.csdn.net/Zhu_Zhu_2009/article/details/88943734
参考
Vue进阶(三十):vue中使用element-ui进行表单验证
element-ui vue表单验证踩坑
Vue项目elementUI中封装表单验证
学习element中,觉得得多封装一下一些函数,比如form验证
Form 表单
javascript对数组和json数组的操作
JavaScript对数组操作。添加/删除/截取/排序/倒序
JavaScript对JSON数组操作。数组添加(push)以及移除(splitce)
典型表单
在上节Vue.js Element Basic组件使用的基础上,将官网的例子添加进来,修改了width,top属性,使界面整洁一点,
<template>
<el-container>
<el-container width="800px">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
...
</el-container>
<el-container style="position: absolute; top: 600px; bottom: 0px; width: 100%;">
...
</el-container>
</el-container>
</template>
脚本部分,
<script>
export default {
data () {
const item = {
date: '2016-05-02',
tabname: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
tableData: Array(5).fill(item)
}
},
methods: {
onSubmit () {
console.log('submit!')
}
}
}
</script>
界面
可以看到,Form出来了,
点击立即创建,从chrome的Console中可以看到输出,
提交表单
安装vue-resource
,
PS C:\dog\program\vue.js\helloworld> npm install --save vue-resource
修改src/main.js
,
import VueResource from 'vue-resource'
Vue.use(VueResource)
设置开发服务器代理,修改config/index.js
,
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
...
修改method,url中传递json参考我的博客JavaScript字符编码与解码,
methods: {
onSubmit () {
console.log('submit!' + this.form.name)
this.$http.get('api/cgi-bin/helloworld.cgi?name=' + this.form.name).then((response) => {
console.info(response.body)
}, (response) => {
console.error(response)
})
}
}
开启服务器运行cgi,点击按钮提交表单,
问题
Expected indentation of 8 spaces but found 10
这个问题是制表符个数不对,多打了了一个(已经让vscode自动将tab转空格),
Missing space before function parentheses
onSubmit() {
改成onSubmit () {
,添加一个空格,
Extra semicolon
多加了一个分号,
src\components\HelloWorld.vue:172:29
console.log('submit!');