什么网站可以做平面赚钱/网上营销怎么做

    element-ui里面的form

    由vue-element-admin 出来的,这个框架呢，主要可以用来做后台使用，里面很多组件都是element-ui里面的，看着也漂亮，所以如果做后台，推荐用这个框架

    之前一直在看这个框架里面的写法

首先普通的form表单里有验证，验证好之后才会发请求到后台(除非上传图片等信息),

    这里说的是属于普通的form表单，只有些简单的组件

    直接用input来说，如果一个form中的input，首先要做的就是这个input验证是不是为空的，然后根据正则去验证

    以下代码由elemnet-admin里面出来的，自己没经历过大的公司，所以就看下别人大的框架，看别人的代码习惯，然后来写，这里说下自己的理解

    上代码：

<template><div class="home"><el-form ref="form" :rules='rules' :model="form" label-width="80px"><el-form-item label="活动名称" prop='name'><el-input v-model="form.name">el-input>el-form-item>el-form><el-button @click='submit' type='primary'>提交el-button>div>template><script>import {validatename} from '@/utils/validate.js'export default {name: 'Home',data(){const validateUsername = function(rule,value,callback){if(value == ''){callback(new Error('名字不能为空'))}else if(!validatename(value)){callback(new Error('名字不满足正则'))}else{callback()}}return{loading:null,rules:{name:[{ required: true, trigger: 'blur', validator: validateUsername }],},form:{name:''}}},methods:{submit(){var me = this;me.$refs.form.validate(vali=>{if(vali){console.log('所有表单验证成功')me.loading = me.$loading()}else{console.log('表单验证没有成功')}})}}}script>

    上面的代码element中的写法，基础的就一个el-form,里面一个el-form-item,然后里面一个表单组件

    然后最后一个按钮，可以放在任意位置

    然后说里面的验证，首先form需要配置一个rules，然后在里面可以配置所有的参数，给他做验证，就会出现rule里面的validator，这个里面的验证就会走到data最开始的时候那个函数，这个就是做验证的，但是我们在里面看到验证的时候里面有一个此页面没有的函数，根据查找，可以找到上面有引入，这个引入的话，就会牵扯到整个框架的 结构，先看下源码里面的结构是怎么样的：

    validate.js：

    然后可以找到里面有个utils，这里面呢，就放置一些框架用的函数，比如现在我们用到的就有validate.js,里面就可以放置项目中的所有的验证，

    然后也可以看到utils/index.js里面，有一些工具函数，看到第一个就是时间转换格式的，有了这个，以后就可以随便玩了，其他的几个文件夹里面也有他们的功能，基本上大的项目感觉可以这样的结构就可以，但是也可以根据自己的需求来添加删除等等

    然后回到上面，表单验证过后点击按钮的时候因为根据element文档我们知道form有一个validate方法，可以看到自己的验证有没有通过，所有就有了上面的代码，如果所有的都通过了，vali就是true，否则是false，这样的话，基本上表单里面的需求基本都有了，

    对了，还有上面form表单里面如果有错误的话，input的下面就会出现红色的文字，用以显示报错信息，如果自定义报错，那就是data最前面那个函数里面配置的，如果空，或者正则没有通过，就会出现error里面的错误信息：

    ok，今天就说到这里了，下次再聊其他的！！！