做后台管理项目的时候,会经常使用到表单,用表单,肯定就会对某些属性做些校验,比如:必填项;正整数;手机,邮箱;长度...等等; iview UI 提供了表单的组件Form
也提供相应的API使用文档,但是在用到项目中难免还是会遇到坑,下面我就简单的罗列一下我在项目中遇到的问题;
Form 的 rules 的使用
prop 中的字段一定要和model rules中的 字段名一样,大家一定要仔细了,否则校验会不生效
rules 的校验规则
比如我有一个name 的校验不能为空,那么我的rules就如下图
注意:name 是一个数组,
如果是校验整数类型,如下图
注意:因为我的price是number,所以type也是number的,否则校验也不通过,
多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等
ruleValidate: {
goodsNum: [
{ required: true, message: '数量不能为空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
],
}
以上这些是我在项目中遇到比较棘手的坑,尤其是 rules 的字段要和model prop 对应,切记,,,这个问题我搞了半天才发现,一定要仔细