element ui 表单验证

  • 3
新手上路,请多包涵

image.png

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

    <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' }]
     
     但这么写完只验证单选框 没有输入框 求解
回复
阅读 665
3 个回答
    <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设置成一样宽

你的 <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' }]
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结构

宣传栏