浅谈关于iview表单验证的问题

 更新时间:2018年09月29日 14:50:02   作者:Amanda_wmy  
这篇文章主要介绍了浅谈关于iview表单验证的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

关于iview表单验证的问题

iview表单验证的步骤:

第一步:给 Form 设置属性 rules   :rules
第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步:注意:Form标签里面是  :model
第四步:注意:在Form标签里面必须添加  ref,相当于id,在此范围内的表单验证有效
第五步:在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败。

  <Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
    <FormItem label='合同编号:' prop="contractNo">
      <Input placeholder="请输入合同编号" v-model='contractForm.contractNo'></Input>
    </FormItem>
    //data里面,写验证
    ruleValidate: {
      contractNo:[
        { required: true, message: '合同编号不能为空', trigger: 'blur' },
      ],
    }
    //methods里面,写方法
    addChange(name){
       this.$refs[name].validate(valid => {
         if (valid) {
         }
       }); 
  </Form> 

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

用iview自带的表单验证select标签的时候,一直验证不通过,因为iview默认校验数据类型为String,而我的select用的value是number类型的

ruleValidate: {
  customer:[
      { required: true, message: '客户名称不能为空', trigger: 'blur',type:'number'},
    ], 
   } 

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

和下拉框一样,日期的类型是data

 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'},
            ],
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue使用websocket概念及示例

    vue使用websocket概念及示例

    这篇文章主要为大家介绍了vue使用websocket概念及示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 基于Vue自定义指令实现按钮级权限控制思路详解

    基于Vue自定义指令实现按钮级权限控制思路详解

    这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue如何实现简易流程图

    vue如何实现简易流程图

    这篇文章主要介绍了vue如何实现简易流程图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 幸运大转盘实现思路详解

    Vue 幸运大转盘实现思路详解

    这篇文章主要介绍了Vue 幸运大转盘实现思路详解,需要的朋友可以参考下
    2019-05-05
  • 详解vue3.x页面功能拆分方式

    详解vue3.x页面功能拆分方式

    本文主要介绍了vue3.x页面功能拆分方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • iview的table组件自带的过滤器实现

    iview的table组件自带的过滤器实现

    这篇文章主要介绍了iview的table组件自带的过滤器实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue跳转方式的常见方式以及区别分析

    vue跳转方式的常见方式以及区别分析

    在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue连接本地服务器的实现示例

    vue连接本地服务器的实现示例

    本文主要介绍了vue连接本地服务器的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • 详解Vue中添加过渡效果

    详解Vue中添加过渡效果

    本篇文章主要介绍了详解Vue中添加过渡效果 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Vue + Vue-router 同名路由切换数据不更新的方法

    Vue + Vue-router 同名路由切换数据不更新的方法

    本篇文章主要介绍了Vue + Vue-router 同名路由切换数据不更新的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论