element form 校验规则&自定义校验规则
总结: form 校验规则&自定义校验规则
- 如template
<el-form
ref="condFormRef"
id="condForm"
:model="cond"
label-width="100px"
size="mini"
:rules="condFormRules"
>
<el-form-item label="预算:" prop="budget">
<el-input
style="width:60%"
v-model="cond.budget"
maxlength="15"
clearable>
</el-input>
<small> 元</small>
</el-form-item>
</el-form>
- 在form 上定义上绑定 rules 属性, 给需要校验的item 增加prop 属性, prop 值需要个rules中的keys 保持一致
condFormRules:{
budget:[
{required: true, message: '', trigger: ['blur','change']},
{validator: validateBudget, trigger: 'blur'},
],
}
说明: (1) required: 是否必填, true则显示红星星, 当设置了必填时, 必须有message, 哪怕为空,否则不填时给默认提示"budget is required"
注意: 如{message: 'aaaaaaaa', trigger: ["blur","change"]}, 没有required,则会校验,但上次校验失败的信息不会自动消失, 即要有message时, 必须有required
(2) trigger: 可选["blur","change"]触发执行校验的事件 blur:失去焦点时, change:数据改变时
this.$refs.condFormRef.validate() 时,trigger都会执行
(3) validator:自定义校验属性,可以定义自己的校验规则,如validateBudget自定义的规则函数, 校验逻辑复杂时可以自定义函数实现。如下校验逻辑复杂的:要求数字且正整数或最多带两位的小数
var validateBudget=(rule, value, callback) => {
if(!value || !Number(value)){ //不输入或输0.0或0.00时,都进入
callback(new Error('请输入预算'));
}
else if(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value) || /(^[0](\.\d{1,2}){1})$/.test(value))){
callback(new Error('请输入正整数或最多带两位的小数'));
}
else{
callback();
}
};
简单时,可以直接写在模板中, 如限制输入数字
<el-input
style="width:60%"
v-model="cond.budget"
maxlength="15"
@input="cond.budget = cond.budget.replace(/[^\d]/g, '')" //非数字的全局替换成空
clearable>
</el-input>
转载自:https://segmentfault.com/a/1190000042043356