使用iview 的form 表单遇到的坑

1,995 阅读1分钟

做后台管理项目的时候,会经常使用到表单,用表单,肯定就会对某些属性做些校验,比如:必填项;正整数;手机,邮箱;长度...等等; 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 对应,切记,,,这个问题我搞了半天才发现,一定要仔细

gh_6d15274d66b7_258.jpg