element ui 表单验证

element ui 表单验证 格式如下

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  </el-form>
 
 
 <script>
  export default {
    data() {
      return {
        ruleForm: {
          resource: ''
        },
        rules: {
          resource: [
            { 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与v-model关键字要一致，prop="resource" v-model="ruleForm.resource"，否则会出现验证错误：会一直显示验证规则失败

如果碰到复杂的form表单传输，类似如prop为数组+id下标组合，可参考：
elementUI rule验证无效 不起作用

vue + element-ui el-form-item循环校验及 el-table和el-form表单校验嵌套使用