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


Posted in Javascript onSeptember 29, 2018

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

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

Javascript 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
You might like
PHP脚本的10个技巧(3)
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python class的继承方法代码实例
2020/02/14 Python
python使用建议与技巧分享(一)
2020/08/17 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
建筑项目策划书
2014/01/13 职场文书
消防安全管理制度
2014/02/01 职场文书
项目施工员岗位职责
2014/03/09 职场文书
给校长的建议书100字
2014/05/16 职场文书
安全隐患整改报告
2014/11/06 职场文书
导游词欢迎词
2015/02/02 职场文书
校本培训个人总结
2015/02/28 职场文书
任长霞观后感
2015/06/16 职场文书
健康证明
2015/06/19 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
导游词书写之黄山
2019/08/06 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL