elementUI的表单验证必须是这种写法才行吗？ruleForm.name

Question

这是官网的例子：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submit()">立即创建</el-button>
</el-form>
------------------------------
  ruleForm:{
    name:"",
  },
  rules:{
    name:[
      {
        required: true, 
        message: '请输入活动名称', 
        trigger: 'blur'
      }
    ]
  }

我的问题：

<el-input v-model="ruleForm.name"></el-input>

像这个地方ruleForm.name，我换成这种写法不可以么？

<el-input v-model="name"></el-input>

换这种写法验证就失效了，好不习惯啊

Answer 1

element-ui验证规则，需要表单标签el-form上加上:rules="rules"，然后与表单内输入框input上绑定prop对应的验证规则
如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="checkName">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
------------------------------
  ruleForm:{
    name:"",
  },
  rules:{
    checkName:[
      {
        required: true, 
        message: '请输入活动名称', 
        trigger: 'blur'
      }
    ]
  }

更改rules里name ==> checkName,对应的表单输入框prop="checkName"；

至于绑定的input上v-model="name",应该根据el-form绑定的:model="ruleForm"lai来的，所以你原先的写法v-model="ruleForm.name"是没问题