iview表单验证之正则验证、函数验证
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表单验证之正则验证、函数验证的更多相关文章
- 有关使用 iview 表单验证的问题
Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...
- iview表单验证下拉框不通过问题
iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...
- iview表单验证不生效问题注意点
按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- iview 表单验证不通过问题?
项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...
- Vue iview 表单封装验证
以下内容转自iview社区,仅供自己查看使用 Form表单部分 <div> <Form ref="FormOne" :model="FormOne&qu ...
- iview表单密码自定义验证
From中定义 ref="passwordForm" 获取dom节点 :model="passwordForm" 关联表单数据对象 :rules=&quo ...
- iview 表单非空验证
rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...
- ant-design表单处理和常用方法及自定义验证
首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库. ...
随机推荐
- 【黑马JavaWeb】.1.2反射机制
文章目录 反射:框架设计的灵魂 获取Class类对象的方式 学习视频:https://www.bilibili.com/video/av47886776?p=10 本来一万行的代码,使用框架以后简化到 ...
- 安装指定版本的Ionic或Cordova
安装ionic 及 cordova npm install -g cordova ionic更新命令 npm update -g cordova ionic安装特定版本 npm install -g ...
- 安装RabbitMq,写程序发送接收消息
1.安装Erlang和RabbitMq 在安装RabbitMq之前需要安装的Erlang(esl-erlang_22.0_windows_amd64.exe): https://pan.baidu.c ...
- 将一个SpringBoot工程打成jar包并在控制台执行起来
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- 编译openwrt时报错build_dir/hostpkg/libubox-2018-07-25-c83a84af/blobmsg_json.c:21:19: fatal error: json.h: No such file or directory
答: 一. 详细日志: build_dir/hostpkg/libubox-2018-07-25-c83a84af/blobmsg_json.c:21:19: fatal error: json.h: ...
- Hadoop : MapReduce中的Shuffle和Sort分析
地址 MapReduce 是现今一个非常流行的分布式计算框架,它被设计用于并行计算海量数据.第一个提出该技术框架的是Google 公司,而Google 的灵感则来自于函数式编程语言,如LISP,Sch ...
- numpy之数组属性与方法
# coding=utf-8import numpy as npimport random # nan是一个float类型 ,not a num不是一个数字;inf,infinite 无穷 # 轴的概 ...
- java.sql.SQLException: Listener refused the connection with the following error: ORA-12505, TNS:list
package DisplayAuthors; import java.sql.*; public class DisplayAuthors { private static final Str ...
- 史上最全SVN 教程
以下博文引用<https://blog.csdn.net/u013067756/article/details/73302758>,再此仅供学习和参考. Svn是什么? SVN(全称Sub ...
- SOA简介
1.你可以把SOA理解为一种概念,总的来说就是面向服务的设计. 这个概念简单来理解就是把之前所谓的模块划分做成服务. 比如之前的日志模块,需要引用你的dll,调用你的写日志方法来写日志.这样当有多个系 ...