Element之表单校验

Element内置了表单校验功能，代码示例如下：

1.在form上定义rules字段，指向变量formRules。

<el-form
  ref="editForm"
  :model="record"
  :rules="formRules">
  <el-form-item
    label="报警原因"
    prop="alertReason"
    label-width="80px">
    <el-col :span="22">
      <el-input v-model="record.alertReason"/>
    </el-col>
  </el-form-item>
  <el-form-item
    label="原因分类"
    prop="reasonClassify"
    label-width="80px">
    <el-col :span="22">
      <el-radio v-model="radio" label="1">断电</el-radio>
      <el-radio v-model="radio" label="2">监测设备更换</el-radio>
      <el-radio v-model="radio" label="3">制冷或除湿设备故障 </el-radio>
      <el-radio v-model="radio" label="4">人为失误</el-radio>
      <el-radio v-model="radio" label="5">其他</el-radio>
      <el-input v-if="radio=='5'" v-model="record.reasonClassify" placeholder="请输入其他原因"/>
    </el-col>
  </el-form-item>
  <el-form-item
    label="处理方法"
    prop="processWay"
    label-width="80px">
    <el-col :span="22">
      <el-input v-model="record.processWay"/>
    </el-col>
  </el-form-item>
  <el-form-item
    label="备注"
    prop="remark"
    label-width="80px">
    <el-col :span="22">
      <el-input v-model="record.remark"/>
    </el-col>
  </el-form-item>
  <el-form-item align="center">
    <el-col :span="24">
      <el-button
        type="primary"
        @click.native.prevent="handleSubmit">
      <i class="fa fa-save"/> 确认处理</el-button>
    </el-col>
  </el-form-item>
</el-form>

2.在formRules变量中给每个prop指定校验规则。

data() {
    return {
      formRules: {
        alertReason: [{ required: true, message: '请输入报警原因', trigger: 'blur' }],
        reasonClassify: [{ required: true, message: '请输入原因分类', trigger: 'blur' }],
        processWay: [{ required: true, message: '请输入处理方法', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
}

3.在提交表单时进行校验。

handleSubmit() {
  this.$refs['editForm'].validate(valid => {
    if (valid) {
      this.$emit('after-edit')
    } else {
      return false
    }
  })
}

即可。