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. [学习笔记] Uplift Decision Tree With KL Divergence

    Uplift Decision Tree With KL Divergence Intro Uplift model 我没找到一个合适的翻译,这方法主要应用是,探究用户在给予一定激励之后的表现,也就是 ...

  2. GitHub:IBM

    ylbtech-GitHub:IBM 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/ibm 2.   6.返回顶部 ...

  3. Django>ORM字段和参数

    Django之ORM字段和参数   字段 常用字段 AutoField 自增int自增列,必须填入参数 primary_key=True. 当model中如果没有自增列,则自动会创建一个列名为id的列 ...

  4. k8s测试容器之间是否互通

    [root@lab2 .kube]# kubectl get pod -o wide NAME READY STATUS RESTARTS AGE IP NODE curl-87b54756-rbqz ...

  5. redis外网无法连接问题

    1.外网无法连接redis 解决方法: 把redis.conf里的bind 127.0.0.1注释掉,不行的话把127.0.0.1修改成0.0.0.0 2.make的时候显示没有gcc 解决方法: 安 ...

  6. WPF子线程更新UI(Dispatcher.BeginInvoke)

       在做WPF开发时,如果直接在子线程里更新UI会报错—–“调用线程无法访问此对象,因为另一个线程拥有该对象.”,这是因为WPF禁止在非UI线程里直接更新UI界面. 解决方案:   在子线程里调用D ...

  7. 重学Python - Day 07 - python基础 -> linux命令行学习 -- 常用命令 一

    常用命令和使用方法如下: man man 命令 #可以查询命令的用法 cat 和 tac cat是正序显示文件内容 tac是倒叙显示文件内容 sort 对文件内容排序 uniq 忽略文件中重复行 hi ...

  8. C#编程 Excel操作

    使用OLEDB操作Excel,关于OLEDB介绍参考http://www.cnblogs.com/moss_tan_jun/archive/2012/07/28/2612889.html 连接字符串: ...

  9. 调用百度api的原理流程

    1.为了实现酒店地址的定位 2.使用可视化便捷的百度地图API生成器:设置公司的地址和地图等级 3.设置地图的滚轮.缩放功能 4.获取代码,拷贝到html页面中 5.申请秘钥,在html中引用地图AP ...

  10. ubuntu显卡(NVIDIA)驱动以及对应版本cuda&cudnn安装

    (已禁用集显,禁用方法可自行百度) 驱动在线安装方式进入tty文本模式ctrl+alt+F1关闭显示服务sudo service lightdm stop卸载原有驱动sudo apt-get remo ...