1

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

表单验证的步骤

第一步:给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'},
                        ],
      }

666888
334 声望10 粉丝

知其然且知其所以然。