浅谈关于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 相关文章推荐
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
js判断是否是手机页面
Mar 17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
python实现的防DDoS脚本
2011/02/08 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python实现图像拼接功能
2020/03/23 Python
python实现猜单词游戏
2020/05/22 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
房屋继承公证书
2014/04/10 职场文书
环境保护建议书
2014/08/26 职场文书
2014年护士长工作总结
2014/11/11 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
安全责任协议书范本
2016/03/23 职场文书
python中print格式化输出的问题
2021/04/16 Python
利用Python判断你的密码难度等级
2021/06/02 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS