iview 表单 验证_iview表单验证的问题

最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。

表单验证的步骤

第一步：给Form设置属性:rules="ruleadd1"。

第二步：给Form设置属性:model。

第三步：在Form标签里面必须添加ref，相当于id，在此范围内的表单验证有效。

第四步：给需要验证的每个FormItem设置属性prop指向对应的

第五步：在操作按钮时，添加方法，对整个表单进行校验，参数为校验完的回调，会返回一个Boolean表示成功与失败

下面我们做一个表单验证的例子

iview进行表单验证select的时候验证失败的问题

用iview自带的表单验证select标签的时候，一直验证不通过，因为iview默认校验数据类型为String，而我们项目中select用的value有时候是number类型的，有时候是String类型的，要根据具体情况设置不同的type类型。

iview进行表单验证时间日期验证失败的问题

我下拉框一样，日期的类型是data类型，所以需要额外设置type类型。

ruleValidate: {

advance:[

{ required: true, message: '预送达时间不能为空', trigger: 'change' ,type: 'date'},

],

}

iview进行多重验证的写法

多重验证包括给一个数组加多个验证条件，比如第一要验证不能为空，第二要验证限制一些长度，写正则表达式等等。

ruleValidate: {

goodsNum: [

{ required: true, message: '数量不能为空', trigger: 'blur' },

{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},

],

}