element-ui 表单校验 - 优化
在表单比较少的项目中, 一直都是按照官网的写法:
<el-form-item label="主要停车场步行时间:" prop="walking_time" :rules="[{ required: true, message: '数据不能为空', trigger: 'blur' },{ type: 'number', message: '输入必须为正整数', min: 0 }]">
<el-input v-model="ruleForm.walking_time" class="width600" placeholder="请输入步行时间"></el-input>
</el-form-item>
但是,在表单比较多的项目中,rules 校验规则在表单中都是 重复性 工作。可以试着将它抽取出来。
- 新建一个文件存放校验规则。 rules.js
const required = true
const trigger = ['blur', 'change']
export const formValidate = {
// 文本框必填校验
textRequired (message = '请填写') {
return {
required,
message,
trigger
},
// 必须为数字得校验
isNumberRule (message = '数字需为0以上', min = 0) {
return {
type: 'number',
message,
min,
trigger
}
}
......
......
......
}
- 直接用。 eg: test.vue
import formValidate form '@/rules.js'
export default {
data () {
return {
formValidate
}
}
}
<el-form-item label="主要停车场步行时间:" prop="walking_time" :rules="[formValidate.textRequired('请输入步行时间'), formValidate.isNumberRule()]">
<el-input v-model="ruleForm.walking_time" class="width600" placeholder="请输入步行时间"></el-input>
</el-form-item>
虽然只是小小的换个写法,但是对于表单比较多的项目,还是能少些一下代码的,并且看起来也简洁了一点点。