0
点赞
收藏
分享

微信扫一扫

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
}
})
}

即可。


举报

相关推荐

0 条评论