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. Java Jsch SFTP 递归下载文件夹

    Java Program For Downloading Folder Content recursively from SFTP Server How to download folder from ...

  2. 学习 vue 需要了解的内容

    总结 vue 的目录 1. vue 基础 指令 事件 动态的属性 组件 动画 2. vue 组件通信 1. 父传子 props 2. 子传父 ref 3. 插槽 4. 组件的生命周期 3. vue 的 ...

  3. C++ string与int的互相转换

    原文地址 C++本身就提供了字符串与整型数之间的互换,那就是利用stringstream.下面是使用方法: 核心: 利用C++中的stringstream流. 由于使用过程比较简单就不再赘述,直接给出 ...

  4. mybatis如何遍历Map的key和value【增删改查】

    转: mybatis如何遍历Map的key和value 2017年11月28日 10:07:57 Joker_Ye 阅读数:4158   1.sql.xml <?xml version=&quo ...

  5. laydate中设置动态改变max与min值的方法

    参考网址: 原网址:https://blog.csdn.net/cherry_11qianqian/article/details/82259704 改进的网址:https://blog.csdn.n ...

  6. linux常用、常见错误

    1.md5加密使用 oppnssl md5 加密字符串的方法 [root@lab3 ~]# openssl //在终端中输入openssl后回车. OpenSSL> md5 //输入md5后回车 ...

  7. C#设置Cookies .

    //-----------------------------载入if(!IsPostBack)        { HttpCookie cookie = Request.Cookies[" ...

  8. ES 知识点

    一.ES基于_version 进行乐观锁并发控制 post /index/type/id/_update?retry_on_conflict=5&version=6 1.内部版本号 第一次创建 ...

  9. python-Web-django-邮箱登陆

    setting: # 发送邮箱 EMAIL_HOST = 'smtp.163.com' EMAIL_PORT = 465 EMAIL_HOST_USER = '666666@163.com' #EMA ...

  10. Leetcode之广度优先搜索(BFS)专题-127. 单词接龙(Word Ladder)

    Leetcode之广度优先搜索(BFS)专题-127. 单词接龙(Word Ladder) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...