iview表单验证之正则

正则验证:

代码:

loginRules: {
stringLength: [
{ required: true, message: '该字段不能为空', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '该字段为整数', trigger: 'blur' }
]
}

函数验证:

1.首先在data中定义验证方法

data () {
const validateMax = (rule, value, callback) => {
if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
if (this.formItem.min * 1 > this.formItem.max * 1) {
callback(new Error('最大值必须大于最小值'))
this.$refs.FormRef.validateField('min') // iviewForm方法,验证min
} else {
callback()
this.$refs.FormRef.validateField('min')
}
} else {
callback()
}
}
const validateMin = (rule, value, callback) => {
if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
if (this.formItem.min * 1 > this.formItem.max * 1) {
callback(new Error('最小值必须小于最大值'))
} else {
callback()
}
} else {
callback()
}
}
return {
}

2.在表单验证中插入验证

/* 表单验证 */
loginRules: {
max: [
{ pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
{ validator: validateMax, trigger: 'blur' }
],
min: [
{ pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
{ validator: validateMin, trigger: 'blur' }
]
}

钻研不易,转载请注明出处......

iview表单验证之正则验证、函数验证的更多相关文章

  1. 有关使用 iview 表单验证的问题

    Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...

  2. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  3. iview表单验证不生效问题注意点

    按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...

  4. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  5. iview 表单验证不通过问题?

    项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...

  6. Vue iview 表单封装验证

    以下内容转自iview社区,仅供自己查看使用 Form表单部分 <div> <Form ref="FormOne" :model="FormOne&qu ...

  7. iview表单密码自定义验证

    From中定义   ref="passwordForm" 获取dom节点  :model="passwordForm" 关联表单数据对象 :rules=&quo ...

  8. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

  9. ant-design表单处理和常用方法及自定义验证

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator  库. ...

随机推荐

  1. Python 的with关键字

    Python 的with关键字 看别人的代码时,with关键字经常会出现,博主决定梳理一下with以及python中上下文(context)的概念 1. 上下文管理器概念 Context Manage ...

  2. vue调试工具vue-devtools安装

    vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 这里介绍一下vue-devtool ...

  3. SQL Server分页的存储过程写法以及性能比较

    ------创建数据库data_Test ----- create database data_Test GO use data_Test GO create table tb_TestTable - ...

  4. 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

    在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...

  5. 日志框架之Logger

    概述 在我们日常的开发中,肯定是少不了要和 Log 打交道,回想一下我们是怎么使用 Log 的:先定义一个静态常量 TAG,TAG 的值通常是当前类的类名,然后在需要打印 Log 的地方,调用 Log ...

  6. ubuntu14.04+安卓7.1(全志源码)+openjdk-8编译

    题记:编译花了将近4小时,所以编译源码是很费时的哦,可以在编译的时候可以学习其他的知识 编译环境准备 软件:WorkStation10 系统:ubuntu14.04 内存:8G 处理器:4个 磁盘大小 ...

  7. Python面向对象进阶和socket网络编程

    写在前面 为什么坚持?想一想当初: 一.面向对象进阶 - 1.反射补充 - 通过字符串去操作一个对象的属性,称之为反射: - 示例1: class Chinese: def __init__(self ...

  8. spring Ioc/DI的理解

    学习spring的童鞋都知道,spring中有两个非常重要的点,Ioc(控制反转)与DI(依赖注入),对于初级玩家来说,这两个概念可能有点模棱两可的感觉,今天就谈下自己的一点理解,不足请多多指教!!! ...

  9. UITableView的使用总结

    直接贴代码了,很好理解,注释很全,一看就懂...... // // ViewController.m // TableViewSectionTitleDemo // // Created by 思 彭 ...

  10. 使用shiro遇到的问题

    Caused by: java.lang.NoClassDefFoundError: net/sf/ehcache/CacheException 解决问题:缺少一个依赖的缓存jar 添加: <d ...