表单验证


  <style type="text/css">
        /*  el-form-item__content 是input外层最大的div*/
        .huo-dong .el-form-item__content{
            width: 217px;
        }    
  </style>

<body>
  <div id="app">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          
        <el-form-item label="活动名称" prop="name" class="huo-dong">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        
        <el-form-item label="活动区域" prop="region">
           <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
           </el-select>
        </el-form-item>
            
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
   </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
           data() {
             return {
                    ruleForm: {
                      name: '',
                      region: '',
                    },
                    rules: {
                      name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                      ],
                      region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                      ],
                    }
                  };
                },
                methods: {
                  submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                      if (valid) {
                        alert('submit!');
                      } else {
                        console.log('error submit!!');
                        return false;
                      }
                    });
                  },
                  resetForm(formName) {
                    this.$refs[formName].resetFields();
                  }
     
                }
    })
  </script>


总结表单验证：
   prop    表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。（重要）
   在element-ui中 搜集表单  都是放在一个对象（ruleForm）里面的哦。有利于维护和保存。
          
   ref="ruleForm"  ruleForm是搜集数据的哪一个对象
   label-width="80px"  表示label的宽度
   <el-button @click="resetForm('ruleForm')">重置</el-button>   ruleForm是搜集数据的哪一个对象