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

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

赞 (0)

相关推荐

  • iview同时验证多个表单问题总结

    iview验证一个表单问题: 在上一篇文章中总结了iview表单验证的问题.其实有两种写法:在点击验证时,这样写时,注意在前面的方法中将要验证的form表单加进去. <Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form> //点击确认按钮 <Button type='

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

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

  • 浅谈PHP链表数据结构(单链表)

    链表:是一个有序的列表,但是它在内存中是分散存储的,使用链表可以解决类似约瑟夫问题,排序问题,搜索问题,广义表 单向链表,双向链表,环形链表 PHP的底层是C,当一个程序运行时,内存分成五个区(堆区,栈区,全局区,常量区,代码区) 规定:基本数据类型,一般放在栈区 复合数据类型,比如对象,放在堆区 定义一个类Hero 定义成员属性排名 $no 定义成员属性姓名 $name 定义成员属性昵称 $nickname 定义成员属性 $next,是一个引用,指向下一个Hero对象 定义构造函数,传递参数:

  • 浅谈MySQL大表优化方案

    背景 阿里云RDS FOR MySQL(MySQL5.7版本)数据库业务表每月新增数据量超过千万,随着数据量持续增加,我们业务出现大表慢查询,在业务高峰期主业务表的慢查询需要几十秒严重影响业务 方案概述 一.数据库设计及索引优化 MySQL数据库本身高度灵活,造成性能不足,严重依赖开发人员的表设计能力以及索引优化能力,在这里给几点优化建议 时间类型转化为时间戳格式,用int类型储存,建索引增加查询效率 建议字段定义not null,null值很难查询优化且占用额外的索引空间 使用TINYINT类

  • jQuery完成表单验证的实例代码(纯代码)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    本文实例讲述了AngularJS实现的获取焦点及失去焦点时的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/angular.js"></scr

  • AngularJS表单验证功能

    能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏.我们要在Web前端尽力保护后端. AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便.AngularJS提供了很多表单验证指令. <form name="form" novalidate> <label na

  • AngularJS实现注册表单验证功能

    AngularJS实现注册表单验证功能

    本文为大家分享了案例: 注册表单验证,供大家参考,具体内容如下 需要使用的两张图片: dui.gif:cuo.gif: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery

  • AngularJS实现表单验证功能

    AngularJS实现表单验证功能

    AngularJS表单验证功能实现代码: ng-model的作用: 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) 5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类 css内容: /*angularJS会根据表单的状态进行添加或者删除

  • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

    AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

随机推荐