（vue）spa项目开发之CRUD&表单验证&vue的增删改查

1. 表单验证

 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
   并将Form-Item的prop属性设置为需校验的字段名即可
   
   <el-form-item label="活动名称" prop="name">
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

   注1：有多个表单，怎么在提交进行区分？
        我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
        所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用

   注2：清空表单验证信息
        this.$refs[formName].resetFields();

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="文章标题" prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>

submitForm 提交表单的方法
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

将表单的方法渲染

return {
        result: [],
        formInline: {
          page: 1,
          total: 0,
          rows: 12,
          title: ''
        },

editFormVisible参数表示是否展示表单
        editFormVisible: false,
        title: '',

rules表示表单规则，相当于正则
        rules: {
          title: [{
              required: true,
              message: '请输入文章标题',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 5,
              message: '长度在3到5个字符',