element ui 表单验证

Question

如图 爱好必须选一个 并且下面那句话也要填

    <el-form-item label="爱好" prop="hobby">
      <el-radio-group v-model="form.hobby">
        <el-radio-button label="吃"></el-radio-button>
        <el-radio-button label="睡"></el-radio-button>
      </el-radio-group>
      <div style="margin-top: 10px">
        <el-input v-model="form.word" placeholder="一句话"></el-input>
      </div>
    </el-form-item>
    
    
     hobby: [{ required: true, message: '请选择爱好', trigger: 'blur' }]
     
     但这么写完只验证单选框 没有输入框 求解

Answer 1

    <el-form-item label="爱好" prop="hobby">
      <el-radio-group v-model="form.hobby">
        <el-radio-button label="吃"></el-radio-button>
        <el-radio-button label="睡"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="" prop="inputPr">
        <el-input v-model="form.word" placeholder="一句话"></el-input>
    </el-form-item>
    
    
     hobby: [{ required: true, message: '请选择爱好', trigger: 'blur' }],
     inputPr:[{ required: false, message: '请选择**', trigger: 'blur' }]
     //写成两个咯，然后input的label设置空字符串，然后label-width设置成一样宽

Answer 2

你的 <el-input v-model="form.word" placeholder="一句话"></el-input> 再用个 el-form-item 包起来不就可以指定 prop 了吗？

代码：

<el-form-item label="" prop="word">
   <el-input v-model="form.word" placeholder="一句话"></el-input>
</el-form-item>

校验规则：

word:[{ required: false, message: '请输入内容', trigger: 'blur' }]

Answer 3

data() {
  const validateRules = (rule, value, callback) => {
   if(!this.form.hobby || !this.form.word) {
     return callback(new Error("错误信息"))
   }
  callback()
 }
  return {
   rules: {
      word: [{ validator: validateRules, trigger: "blur" }]
   }
  }
}

这样不用改dom结构